Ajax使用方法

1. 入口函数

 $(function () {
	           
});

2. 实现方式：
   1. 原生的JS实现方式（了解）

 	//1.创建核心对象
		var xmlhttp;
		if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else { // code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		//2. 建立连接
		/*
		参数：
		    1. 请求方式：GET、POST
		        * get方式，请求参数在URL后边拼接。send方法为空参
		        * post方式，请求参数在send方法中定义
		    2. 请求的URL：
		    3. 同步或异步请求：true（异步）或 false（同步）
			
			             */
		xmlhttp.open("GET", "ajaxServlet?username=tom", true);

		//3.发送请求
		xmlhttp.send();

		//4.接受并处理来自服务器的响应结果
		//获取方式 ：xmlhttp.responseText
		//什么时候获取？当服务器响应成功后再获取

		//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
		// 回调函数  就是服务器响应后调用的函数
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				alert(responseText);
			}
		}

2. JQeury实现方式
   1. $.ajax() * 语法： $.ajax({ 键值对 }); //使用$.ajax()发送异步请求

		$.ajax({
			url: "ajaxServlet1111", // 请求路径
			type: "POST", //请求方式
			//data: "username=jack&age=23",//请求参数
			data: {
				"username": "jack",
				"age": 23
			},
			success: function(data) {
				alert(data);
			}, //响应成功后的回调函数
			error: function() {
				alert("出错啦...")
			}, //表示如果请求响应出现错误，会执行的回调函数

			dataType: "text" //设置接受到的响应数据的格式
		});

简写jq的ajax

2. $.post()：发送post请求
   • 语法：$.post(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型

         $.post(
            "getinfo",
			//data：请求参数
            {
				"username": "jack",
				"age": 23
			},
            function (data) {

            },
            "text"
        );

3. $.get()：发送post请求
   • 语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型

         $.get(
            "getinfo",
			//data：请求参数
            {
				"username": "jack",
				"age": 23
			},
            function (data) {

            },
            "text"
        );

表单取值

1. javascipt 使用jq

 var namevalue = $("#nameid").val();

          var sexvalue=$("input[type='radio']:checked").val();


          var addressvalue =$("#uaddress:selected").val()

          $.ajax({
              url: "getinfo",
              type: "get",
              data: {uname: namevalue, usex: sexvalue, "uaddress": addressvalue},
              success: function (data) {
                  alert(data);
              }


          });

表单取值

2. html

姓名<input type="text" id="nameid" name="uname"><br>
			性别:<input type="radio" name="usex" value="男">男
			<input type="radio" name="usex" value="女">女<br>

			地址:<select name="uaddress" id="uaddress">
				<option value="广西">广西</option>
				<option value="上海">上海</option>
				<option value="北京">北京</option>

			</select>
		<button id="but1" onclick="sentimfo()">提交</button>

表单取值 使用jq序列化表单 推荐!! javascript写法

    function sentimfo() {

    
        //
        //     3. $.post()：发送post请求
        //     * 语法：$.post(url, [data], [callback], [type])
        //     * 参数：
        // * url：请求路径
        //     * data：请求参数
        //     * callback：回调函数
        //     * type：响应结果的类型

        var info = $("#userform").serialize();
        $.post(
			//url：请求路径
            "getinfo",
 			//data：请求参数
            info,
            function (data) {

            },
            "text"
        )


    }

表单取值 使用jq序列化表单 推荐!! html写法

<form id="userform">
    姓名<input type="text" id="nameid" name="uname"><br>
    性别:<input type="radio" name="usex" value="男">男
    <input type="radio" name="usex" value="女">女<br>

    地址:<select name="uaddress" id="uaddress">
    <option value="广西">广西</option>
    <option value="上海">上海</option>
    <option value="北京">北京</option>

</select>
</form>
<button id="but1" onclick="sentimfo()">提交</button>