标签：function 请求 json ajax Ajax 详解 使用 data name

一.原生 AJAX 请求的示例

<script type="text/javascript">
            // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
            function ajaxRequest() {
                //1、我们首先要创建XMLHttpRequest 
                var xmlhttprequest = new XMLHttpRequest();
                //2、调用open方法设置请求参数
                xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
                //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xmlhttprequest.onreadystatechange = function(){
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
                        var jsonObj = JSON.parse(xmlhttprequest.responseText);
                        // 把响应的数据显示在页面上
                        document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
                    }
                }
                //3、调用send方法发送请求
                xmlhttprequest.send();

                alert("我是最后一行的代码");

            }
        </script>

 

二.jQuery 中的 AJAX 请求

1.$.ajax 方法 url　　   表示请求的地址 type　　表示请求的类型 GET 或 POST 请求 data　　表示发送给服务器的数据　　格式有两种：　　一：name=value&name=value　　二：{key:value} success　　请求成功，响应的回调函数 dataType　　响应的数据类型　　常用的数据类型有：text 表示纯文本、xml 表示 xml 数据、json 表示 json 对象   2.$.get 方法和$.post 方法 url　　　　请求的 url 地址 data　　    发送的数据 callback　  成功的回调函数 type　　　 返回的数据类型   3.$.getJSON 方法 url　　　　请求的 url 地址 data　　　 发送给服务器的数据 callback　　成功的回调函数   4.表单序列化 serialize() serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。  

<script type="text/javascript">
            $(function(){
                // ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                        // data:"action=jQueryAjax",
                        data:{action:"jQueryAjax"},
                        type:"GET",
                        success:function (data) {
                            // alert("服务器返回的数据是：" + data);
                            // var jsonObj = JSON.parse(data);
                            $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
                        },
                        dataType : "json"
                    });
                });

                // 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请求
                    $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
                        $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
                    },"json");
                    
                });

                // 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);
                    });
                });

                // ajax请求
                $("#submit").click(function(){
                    // 把参数序列化
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
                        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
                    });
                });
                
            });
        </script>

 

标签：function,请求,json,ajax,Ajax,详解,使用,data,name
来源： https://www.cnblogs.com/wuwuyong/p/14856852.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。