AJAX请求

最新推荐文章于 2021-10-23 11:06:39 发布

笨蛋悠米

最新推荐文章于 2021-10-23 11:06:39 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_46744534/article/details/107291256

版权

AJAX请求

什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

原生 AJAX 请求的示例

js写的ajax

    <script>
    	//1
        function getXhr(){//得到浏览器对象
           var xhr=null; //ie6之前的，
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{//ie6后
                xhr=new ActiveXObject('Microsoft.XMLHttp');
            }
            return xhr;
        }
        //2
       function getText() {
          var xhr=getXhr();
          var aa=document.getElementById("a").value;
          //alert(aa);
           //从位置0开始取1位，substr
           //substring 是从位置0取到位置1
           //parseInt(aa)==aa  说明aa全是数字
           //181ab181->parseInt之后，只会留下字母之前的数字
         if(aa.substr(0,1)=="1" && aa.length==11 && parseInt(aa)==aa ){
             xhr.open("get","getInfo.do?c="+aa,true);
             //  * //判断状态
             xhr.onreadystatechange=function () {
                 //4请求成功readyState   200响应成功
                 if(xhr.readyState==4 && xhr.status==200){
                     //xhr.responseText;服务器端发过来的数据，
                     //alert("1");
                     //document.getElementById("b").value=xhr.responseText;
                     //可以使用JSON.parse来转换成json对象xhr.responseText;
                 }
             };
             xhr.send();
         }else {
             alert("手机号格式不对");
         }
       }
    </script>

jQuery 中的 AJAX 请求

$.ajax 方法

url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

记得导包：jquery-3.3.1.min.js
传文本过来！

<head>
    <title>Title</title>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        $(function() {
            $("#code_img").click(function (){
                 this.src="/01_servlet_war/kapthcha.jpg?d="+new Date();
            });
            $("#ajaxBtn").click(function(){
                $.ajax({
                    url:"/01_servlet_war/htmlServlet",
                    // data:"action=jQueryAjax",
                    data:{action:"jQueryAjax"},
                    type:"GET",
                    success:function (data) {
                        // alert("服务器返回的数据是：" + data);
                        // var jsonObj = JSON.parse(data);
                        $("#code").val(data);
                    },
                    dataType : "text"
                });
            });
        })
    </script>
</head>

<body>
<form action="/01_servlet_war/htmlServlet" method="get">
    用户名：<input type="text" name="username" value="${cookie.username.value}"> <br>
    验证码：<input type="text" name="code" id="code" style="width: 100px;" >
    <img src="/01_servlet_war/kapthcha.jpg" style="width: 100px; height: 30px;" id="code_img"><br>
    <button type="button" id="ajaxBtn" value="ajax"></button>
    <input type="submit" value="登录">
</form>
</body>

如果是json格式的话：

                $.ajax({
                    url:"/01_servlet_war/htmlServlet",
                    // data:"action=jQueryAjax",
                    data:{action:"jQueryAjax"},
                    type:"GET",
                    success:function (data) {
                        // alert("服务器返回的数据是：" + data);
                        // var jsonObj = JSON.parse(data);
                        alert(data);
                        $("#code").val(data[0]);
                    },
                    dataType : "json"
                });

java页面：

        List<String> ss=new ArrayList<>();
        ss.add("aa");
        PrintWriter writer = resp.getWriter();
        Gson gson = new Gson();
        String s = gson.toJson(ss,new TypeToken<List<String>>(){}.getType());
        writer.println(s);

$ .get 方法和$.post 方法

比上面的ajax少了type，因为本身先定好了type

url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

                // ajax--get 请求
                $("#getBtn").click(function(){
                    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
                        $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
                    },"json");
                });
                // ajax--post 请求
                $("#postBtn").click(function(){
                    $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data)
                    {
                        $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
                    },"json");
                });

$.getJSON 方法

url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

                // ajax--getJson 请求
                $("#getJSONBtn").click(function(){
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
                        (data) {
                        $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
                    });
                });

表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

注意：

$("#form01").serialize()可以取到form表单中所有的文本框内的值
action后面的&必不可少

            // ajax 请求
            $("#ajaxBtn").click(function () {
                // 把参数序列化
                $.getJSON("/01_servlet_war/htmlServlet", "action=jQuerySerialize&" +
                    $("#form01").serialize(), function (data) {
                    $("#code").val(" Serialize 编号：" + data[0]);
                });
            });

笨蛋悠米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX请求

jsp页面：核心代码： <script> //1 function getXhr(){//得到浏览器对象 var xhr=null; //ie6之前的， if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{//ie6后 xhr=new ActiveXObject(
复制链接

扫一扫