精华内容
下载资源
问答
  • 发送ajax请求方式有哪些

    千次阅读 2018-10-12 11:28:18
    一、发送ajax的原理和步骤。 ajax的原理是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。XMLHttpRequest是浏览器内建对象,用于在浏览器后台与服务器通信(交换数据)。因此,可以不用...

    一、发送ajax的原理和步骤。

        ajax的原理是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。XMLHttpRequest是浏览器内建对象,用于在浏览器后台与服务器通信(交换数据)。因此,可以不用刷新整个页面实现页面的部分更新。
    

    1、创建异步对象

        启动浏览器内建对象XMLHttpRequest,用于在浏览器后台与服务器通信(交换数据)。
    

    2、设置请求行

    3、设置请求头

    4、设置请求体

    5、接收返回的数据

     5.1、设置响应报文
    
    (1)报文行:状态码200 ok表示当前服务器响应成功。
    
            状态代码由三位数字组成,第一个数字定义了响应的类别,且有五种可能取值。
            1xx:指示信息 —— 表示请求已接收,继续处理。
            2xx:成功 —— 表示请求已被成功接收、理解、接受。
            3xx:重定向 —— 要完成请求必须进行更进一步的操作。
            4xx:客户端错误 —— 请求有语法错误或请求无法实现。
            5xx:服务器端错误 —— 服务器未能实现合法的请求。
     (2)报文头:服务器给客户端的一些额外的信息。
    
     (3)报文体:4表示返回的数据可以使用。返回responseText:普通字符串。返回responseXML:XML文件。
    

    返回数据的属性有五个状态:

            xhr.readyState = 0时,(未初始化)还没有调用send()方法。    
            xhr.readyState = 1时,(载入)已调用send()方法,正在发送请求。       
           xhr.readyState = 2时,(载入完成)send()方法执行完成,已经接收到全部响应内容。
            xhr.readyState = 3时,(交互)正在解析响应内容。
            xhr.readyState = 4时,(完成)响应内容解析完成,可以在客户端调用了。
     (4)onreadystatechange 是 Javascript 的事件的一种,其意义在于监听 XMLHttpRequest 的状态是否发生改变。
    
        注:为什么设置请求行、请求头、请求体以及接收返回的数据涉及到了与数据库的连接的知识,由于这里不是重点,所以不做过多的叙述,有兴趣的小伙伴可以去查一下客户端与服务器交互的步骤和原理。
    

    二、原生js发送ajax

    1、发送get请求

    启动内建对象XMLHttpRequest
    
       var xhr = XMLHttpRequest();
    
    设置请求行
    
       open('get','url?发送的内容(键1=值1,键2=值2…)');
    
    设置请求头
    
       get请求不需要设置请求头
    
    设置请求体
    
       send(null);
    
    监听 XMLHttpRequest 的状态是否发生改变
    
       xhr.onreadystatechange = function(){
    
            if(xhr.status == 200 &&xhr.readyState == 4){
    
                            //getAllResponseHeaders:获取所有响应头
    
                            //responseText:接收普通字符串
    
                            //在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象
    
                            //responseXML:专门用来接收服务器返回的xml数据的
    
                            //responseXML:获取的结果可以理解为一个dom结构,我们可以使用dom的方式来获取这个返回值是的数据
    
             }
    
        }
    

    2、发送post请求

       post请求和get请求基本上都一样,只有设置请求行、请求头和请求体的时候不一样,在此仅指出其中的不同。
    
    设置请求行
    
       open(‘post’,url);
    
    设置请求头
    
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
    设置请求体
    
        xhr.send(发送的参数);
    

    代码演示:

      在common.js文件中:   
    		    function $(id){
    				    return document.getElementById(id);
    			 }
    			function createXhr(){
    				var xhr=null;
    			  if(window.XMLHttpRequest){
    			      xhr=new XMLHttpRequest();
    			  }else{
    			      xhr= new ActiveXObject('Microsoft.XMLHttp');
    			  }
    			   return xhr;
    			}
      
      
      html文件中:
      
      <script src="common.js"></script>
      //检测用户名是否存在
     function uname_check(){	
            //1.创建xhr对象
    	    var xhr=createXhr();
    		//2.监听
    	    xhr.onreadystatechange=function(){
    		  if(xhr.readyState==4&&xhr.status==200){
    		    var res=xhr.responseText; //后端返回的文本 [{"uid":2,"user_name":"当当喵","gender":1}]
    			//console.log(res);
                  if(res=="1"){				  
    			      $("showuname").innerHTML="用户名已占用";
                      isRegister=false;
    			  }else if($("uname").value==""){
    			      $("showuname").innerHTML="用户名不能为空";	 
    			  }else{
    			    $("showuname").innerHTML="用户名可注册";
                      isRegister=true;
    			  }
    		  }
    		}
            //3.打开连接
    		var uname=$("uname").value;
    	   xhr.open("get","/myPro/ajjquery?uname="+uname,true);
    	   //4.发送连接
    	   xhr.send(null);	  
    }   
    

    三、jQuery发送ajax

    1、引入jQuery
    2、各个参数介绍
           $.ajax({}) 可配置方式发起Ajax请求
           $.get() 以GET方式发起Ajax请求
           $.post() 以POST方式发起Ajax请求
           $('form').serialize()序列化表单(即格式化key=val&key=val)
           url 接口地址
           type 请求方式
           timeout 请求超时
           dataType 服务器返回格式
           data 发送请求数据
           beforeSend:function () {} 请求发起前调用
           success 成功响应后调用
           error 错误响应时调用
           complete 响应完成时调用(包括成功和失败)
    
      3、常用格式
           $.ajax({
              type:'请求类型’,
              url:'请求地址’,
                  data:{},
                  dataType:’’,
           success:function(result){
                  成功后的操作
           }
    })
    

    代码演示:

    html文件中:
    <script src="js/jquery-3.2.1.js"></script>
    <button id="btn">加载天气...</button>
      <script>
        $("#btn").click(function(){
        $.ajax({
          url:"http://127.0.0.1:3000/index/",
          type:"get",
          dataType:"jsonp", //原理同方案4
          success:function(res){
            document.write(res);
          }
        })  
      });
    </script>
    
    后端文件中:
    var express=require("express")
    var router=express.Router();
    
    //jsonp方式跨域
    
    router.get("/",(req,res)=>{
       var weather="北京 晴 26~32";
       res.writeHeader(200,{"Content-Type":"text/plain;charset=utf-8"});
       var fun=req.query.callback; //必须是callback,ajax发送的时候只能是callback
       res.end(`${fun}('${weather}')`);//填充式json:jsonp  把数据装入js语句当中发回就叫填充式jsonp
    });
    
    注意:
      因为xhr不允许发送ajax跨域,由于jquery里面封装的是xhr对象,所以  jquery不能发送ajax跨域
     解决:加上 datatype:jsonp,原理:不再是ajax请求而是script请求
     加上jsonp之后原理其实是在head当中动态加载script,用完加马上删掉
     jsonp
    

    四:Vuejs 发送ajax请求:
    一、概况
    ①vuejs中没有内置任何ajax请求方法
    ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise
    ③在vue2.0版本,使用社区的一个第三方库 axios ,也支持promise
    ④在HTML5时代,浏览器增加了一个特殊的异步请求方法 fetch,原生支持promise,由于兼容性问题,一般用于移动端
    ⑤还有的项目会使用vue和jquery混用,借助jQuery的ajax方法

    二、axios库的使用
    ①安装和引入:
    npm直接下载axios组件,下载完毕后axios.js就存放在
    node_modules\axios\dist中:

       npm install axios
    

    网上直接下载axios.min.js文件,或者使用cdn,通过script src的方式进行文件的引入:

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    ②发送get请求
    基本使用格式:
    axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典
    axios.get(url[,options]);
    传参方式:
    通过url传参,通过params选项传参

    案例:

    <div id="app">
        <button @click='send'>发送Ajax请求</button>
        <button @click='sendGet'>GET方式发送Ajax请求</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
            new Vue({
                el:'#app',
                data:{
                    user:{name:'eric',age:24},
                },
                methods:{
                    send(){
                      axios({
                          method:'get',
                          url:'http://www.baidu.com?name=jack&age=30'
                      }).then(function(resp){
                          console.log(resp.data);
                      }).catch(err=>{
                          console.log('请求失败:'+err.status+','+err.statusText);
                      });
                    },
                    sendGet(){
                        axios.get('server.php',{
                            params:{name:'tom',age:20}
                        }).then(resp=>{
                            console.log(resp.data)
                        }).catch(resp=>{
                            console.log('请求失败:'+err.status+','+err.statusText);
                        });
                    },
                },
            });
    </script>
    

    ③发送post请求(push,delete的非get方式的请求都一样)

    基本使用格式:
    axios.post(url,data,[options]);
    传参方式:
    自己拼接为键值对;使用transformRequest,在请求发送前将请求数据进行转换;如果使用模块化开发,可以使用qs模块进行转换;
    注意:
    axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参

    案例:

    <div id="app">
        <button @click='sendPost'>post方式发送Ajax请求</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
            new Vue({
                el:'#app',
                data:{
                    user:{name:'eric',age:24},
                },
                methods:{
                    sendPost(){
                        axios.post('server.php',this.user,{
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        }).then(resp=>{
                            console.log(resp.data)
                        }).catch(err=>{
                            console.log('请求失败:'+err.status+','+err.statusText);
                        });
                    },
                },
            });
    </script>
    

    ④发送跨域请求:axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库,可以使用vue-resource发送跨域请求

    五。vue resource发送ajax请求
    如果项目中没有vue-resource,先安装vue-resource :

     npm install vue-resource –save 
    

    引用:再主入口main.js中(因为都要用到):

    import  VueResource from 'vue-resource'            //node_module中的库
    

    使用vue-resource

    Vue.use(VueResource)
    

    在组件中使用vue-resource
    加载resource后,this里面多一个属性$http

    发送get请求:

    this.$http.get('data.php',{'name':123}).then(function(response){
       this.posts=response.data;
    })
    

    发送post请求
    resource中的post请求默认将数据使用request payload方式进行发送,这里应该加入以下代码。转换数据发送格式。否则可能会导致后端收不到post数据:

    Vue.http.options.emulateJSON = true;
    Vue.http.options.headers = {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    };
    

    简写发送post请求

    this.$http.post('data.php',{'name':123}).then(function(response){
     this.posts=response.data;
    })
    

    展开全文
  • JSON&... JQuery的AJAX4.1 GET请求方式4.2 POST请求方式4.3 ajax请求方式4.4 JQuery3.0 的GET新增签名方式4.5 JQuery3.0 的POST新增签名方式 1. JSON 使用AJAX会用到JSON的相关内容,这里简单介绍一...

    JSON&AJAX

    1. JSON

    使用AJAX会用到JSON的相关内容,这里简单介绍一下

    1.1 json概述

    ​ JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,代替了以前的 XML 格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    类型语法
    对象类型{键:值 键:值}
    数组/集合类型[值1,值2,值3]
    混合类型[{键:值},{键:值 键:值},{键:值}]
    { 键: [ 值, 值, 值]}

    1.2 Json使用

    • 对象类型
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
    	// person 对象的 JSON 对象,属性名:firstname、lastname、age 给三个属性赋值
    	var person = {
    	firstname: "孙悟空",
    	lastname: "齐天大圣",
    	age: 500
    	};
    	//输出对象的每个属性值
    	document.write("姓:" + person.firstname + "<br/>");
    	document.write("名:" + person.lastname + "<br/>");
    	document.write("年龄:" + person.age + "<br/>");
    </script>
    </body>
    </html>
    
    • 数组类型,包含三个对象
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
    	//创建一个数组,包含 3 个对象
    	var persons = [
    	{
    		id: 1,
    		name: "孙悟空",
    		sex: "男"
    	},
    	{
    		id: 2,
    		name: "猪八戒",
    		sex: "妖"
    	},
    	{
    		id: 3,
    		name: "嫦娥",
    		sex: "女"
    	}
    	];
    	//遍历输出每个元素
    	for(var p of persons) {
    		document.write("编号:" + p.id + "<br/>");
    		document.write("姓名:" + p.name + "<br/>");
    		document.write("性别:" + p.sex + "<br/>");
    		document.write("<hr/>");
    	}
    </script>
    </body>
    </html>
    
    • 混合类型
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
    //创建这种格式: {"param":[{key:value,key:value},{key:value,key:value}]}
    var myBabies = {
    	baobao: [
            {
                name: "小红",
                age: 18
            },
            {
                name: "小泽",
                age: 20
            },
            {
                name: "小苍",
                age:22
            }
    	]
    };
    //得到这个对象的 baobao 属性
    var baobao = myBabies.baobao; //返回数组
    for(var b of baobao) {
        document.write(b.name + "<br/>");
    }
    </script>
    </body>
    </html>
    

    ###2. ajax概述

    Asynchronous JavaScript And XML :异步的 JavaScript 和 XML
    提交方式

    ​ 以前我们表单提交数据给服务器,发送的请求是同步。串行操作方式,如果服务器没有响应回来,浏览器不能进行任何操作,只能等待。AJAX 使用异步的提交方式,后台进行数据的提交给服务器。

    应用场景

    1. 检查用户名是否已经被注册

    ​ 很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。

    1. 省市二联下拉框联动

    ​ 很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现不同的市区的选择,这就是最常见的省市联动效果。

    1. 自动补全

      在百度淘宝京东搜索商品或者其他东西时出现搜索下拉框的提示,这也使用了ajax

    3. 原生AJAX

    ​ 所有的 AJAX 的操作代码都使用纯 JS 去完成,不使用任何框架。开发效率相对低,代码量会更大一些。

    demo

    使用原生ajax实现判断用户名

    前端发送原生ajax请求并接收响应数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断用户名</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    用户名:<input type="text" id="username" name="username">
    <span id="info"></span>
    <script type="text/javascript">
        $("#username").blur(function () {
            //创建一个xmLRequest对象
           var request = new XMLHttpRequest();
            //得到返回数据时触发方法
           request.onreadystatechange = function () {
               //判断返回状态,如果返回状态是200,并且readyState=4时获得返回数据
               if(request.readyState == 4 && request.status == 200){
                   var value = request.responseText;
                   //返回数据放在id为info的span里面
                   $("#info").html(value);
               }
           };
           var username = $("#username").val();
            //打开一个链接并发送一个请求
           request.open("GET","demo1?name=" + username,true);
           request.send();
        });
    </script>
    </body>
    </html>
    

    后端接收请求并发送响应数据

    package com.zmysna.demo;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet("/demo1")
    public class Demo1XHR extends HttpServlet{
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/plain;charset=utf-8");
            PrintWriter writer = response.getWriter();
            String username = request.getParameter("name");
            if(username.equals("zmysna")){
                writer.print("用户名已经注册");
            }else{
                writer.print("注册成功,欢迎" + username);
            }
    
        }
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
        }
    }
    

    4. JQuery的AJAX

    语法说明
    $.get(url,[data],[callback],[type])使用get方式发送请求给服务器
    $.post(url,[data],[callback],[type])使用post方式发送请求给服务器
    $.ajax([setting])使用原生 AJAX 发送请求给服务器,参数相对比较多一点,
    设置更加详细
    $.get([settings])
    3.0 新的方法签名方式
    使用 GET 方法发送请求给服务器,以后会代替上面的写法。
    参数与$.ajax 相同,设置参数相对多一些。
    $.POST([settings])
    3.0 新的方法签名方式
    使用 POST 方法发送请求给服务器,以后会代替上面的写法。
    参数与$.ajax 相同,设置参数相对多一些。

    4.1 GET请求方式

    $.get(url, [data], [callback], [type])

    参数说明

    参数名称解释
    data发送给服务器的数据,有以下两种格式
    格式 1 :键 1=值 1&键 2=值 2

    格式 2 :使用 JSON 对象
    {
    键 1:值 1,
    键 2:值 2
    } |
    | url | 访问服务器地址 |
    | callback | 数据从服务器返回以后调用的回调函数,一般使用匿名函数
    回调函数的参数就是从服务器返回的数据 |
    | type | 从服务器返回的数据类型
    取值xml , html, script, json, text, _default
    默认是字符串文本类型 |

    改造前面的demo,使用jquery的ajax,后台代码不变。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断用户名</title>
        <!--导入 jquery 框架-->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    用户名:<input type="text" id="username" name="username">
    <span id="info"></span>
    <script type="text/javascript">
        $("#username").blur(function () {
            var username = $("#username").val();
           $.get(
               "demo1",
           		"name=" + username,
               function(data){
                   $("#info").html(data);
               },
               "text"
           );
        });
    </script>
    </body>
    </html>
    

    4.2 POST请求方式

    $.get(url, [data], [callback], [type])

    和get请求方式大体一致,区别是请求的方式不同,改请求方法名字就行。

    $.post(
           "demo1",
       		"name=" + username,
           function(data){
               $("#info").html(data);
           },
           "text"
    );
    

    4.3 ajax请求方式

    $.ajax([settings])

    ​ 其中,settings 是一个 JSON 形式的对象,格式是{name:value,name:value… …},常用的 name 属性名如下:

    参数名称解释
    data发送给服务器的数据,使用 JSON 对象

    {
    键 1:值 1,
    键 2:值 2
    } |
    | url | 访问服务器地址 |
    | method | 发送请求的方式:GET或POST;默认是GET方式 |
    | datatype | 从服务器返回的数据类型
    取值可以是xml , html, script, json, text, _default |
    | success | 数据从服务器返回以后调用的回调函数,一般使用匿名函数
    回调函数的参数就是从服务器返回的数据 |
    | error | 如果服务器出现异常调用这个函数 |
    | async | 设置后台发送格式,是异步或同步发送 。通常省略
    默认值 :true ,异步发送请求。 |

    使用ajax实现判断用户名

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax实现判断用户名</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    用户名:<input type="text" id="username" name="username">
    <span id="info"></span>
    <script type="text/javascript" >
        $("#username").blur(function () {
            var username = $(this).val();
            $.ajax({
                url : "demo1",
                method : "GET",
                data : {name : username},
                dataType : "text",
                success : function (data) {
                    $("#info").html(data);
                },
                error: function () {
                    alert("服务器错误");
                }
            })
        });
    </script>
    </body>
    </html>
    

    4.4 JQuery3.0 的GET新增签名方式

    $.get([settings])

    使用方式和ajax签名方式类似,使用get方式发送ajax请求仅仅需要在上面的例子上修改一个签名名字。

    $.get({
            url : "demo1",
            method : "GET",
            data : {name : username},
            dataType : "text",
            success : function (data) {
                $("#info").html(data);
            },
            error: function () {
                alert("服务器错误");
            }
    });
    

    4.5 JQuery3.0 的POST新增签名方式

    $.post([settings])

    使用方式和ajax签名方式类似,使用post方式发送ajax请求仅仅需要在上面的例子上修改一个名字。

    $.post({
            url : "demo1",
            method : "GET",
            data : {name : username},
            dataType : "text",
            success : function (data) {
                $("#info").html(data);
            },
            error: function () {
                alert("服务器错误");
            }
    });
    
    展开全文
  • jQuery发送Ajax请求

    万次阅读 多人点赞 2018-04-23 01:21:16
    Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过JavaScript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。 其实不刷新...

    转载请注明出处:https://blog.csdn.net/jinixin/article/details/80042763


    平时工作中一直有接触jQuery发送Ajax请求,发现其种类繁多,在此总结几种常见jQuery的Ajax方法。



    概述


    Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过JavaScript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。

    其实不刷新整个页面便可与服务器通信的方法有很多,比如Flash,Java applet,iframe等,但Ajax是目前最为常见的一种。

    我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax,对于这种方法在这里不做介绍,下面直接了解jQuery实现Ajax的几种方法。



    数据格式


    浏览器与服务器之间传输数据所采用的格式,比较常见的有xml,html,text,json,jsonp等,目前json由于占用更小存储,且是JavaScript原生格式,因此很受欢迎。


    当确定数据传输采用json格式后,下面就需要考虑序列化问题了。

    网络中传输的都是文本字符串(其实是二进制比特流,这里方便理解),因此在向网络通道中写入数据时,都需要先序列化json对象为文本字符串。而从网络通道中读取数据时,都需要反序列化文本字符串为json对象。在Python中json.dumps用于序列化,json.loads用于反序列化。

    如果确定数据格式是json,JS也需对服务器返回的数据进行反序列化,即把json样式的字符串变成json对象。
    var json_str = '{"result": "hello, world!"}';
    var json_object = eval("(" + json_str + ")");  // 法一,使用eval函数,注意括号
    var json_object = jQuery.parseJSON(json_str);  // 法二,使用jQuery的parseJSON函数
    
    alert(json_object.result);                     // 反序列化成功,输出结果

    下面就引出jQuery中发送Ajax请求的几个常见方法。



    $.ajax()


    该方法用于执行Ajax请求,常用于其他jQuery Ajax方法不能完成的请求,也许我们可以把它称为"jQuery中Ajax系列方法之母"。

    形式:$.ajax({name:val, name:val,...});
    可选字段:
    1)url:链接地址,字符串表示
    2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}
    3)type:"POST" 或 "GET",请求类型
    4)timeout:请求超时时间,单位为毫秒,数值表示
    5)cache:是否缓存请求结果,bool表示
    6)contentType:内容类型,默认为"application/x-www-form-urlencoded"
    7)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json
    8)success:请求成功后,服务器回调的函数
    9)error:请求失败后,服务器回调的函数
    10)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
    11)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
    12)username:访问认证请求中携带的用户名,字符串表示
    13)password:返回认证请求中携带的密码,字符串表示
    不知道将最后两个放到data中去,是不是密码会以明文展示,因没有尝试过,这里不敢下结论。


    举例:
    $.ajax({
        url: "/greet",
        data: {name: 'jenny'},
        type: "POST",
        dataType: "json",
        success: function(data) {
            // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型,故不需要再反序列化
            ...
        }
    });


    $.post()


    该方法使用POST方式执行Ajax请求,从服务器加载数据。

    形式:$.post(url, data, func, dataType);
    可选参数:
    1)url:链接地址,字符串表示
    2)data:需要发送到服务器的数据,格式为{A: '...', B: '...'}
    3)func:请求成功后,服务器回调的函数;function(data, status, xhr),其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可
    4)dataType:服务器返回数据的格式


    举例:
    $.post(
        "/greet",
        {name: 'Brad'},
        function(data) {
            ...
        },
        "json"
    );


    $.get()


    该方法使用GET方式执行Ajax请求,从服务器加载数据。

    形式:$.get(url, data, func, dataType);
    其各个参数所示意义与$.post()一致,在此不再列出,唯一区别就是请求类型是GET。


    举例:
    $.get(
        "/greet",
        {name: 'Brad'},
        function(data) {
            ...
        },
        "json"
    );

    上面三个是jQuery中发送Ajax请求较为重要的方法,下面再选择三个较为常见的方法,简单做解释。


    $.getJSON()


    该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。

    形式:$.getJSON(url, data, func);


    因为确定服务器返回json编码的数据,故相较于$.get()不必再指定dataType。


    举例:
    $.getJSON(
        "/greet",
        {name: 'jenny'},
        function(data) {
            ...
        }
    );


    $.load()


    该方法将服务器加载的数据直接插入到指定DOM中。

    形式:$.load(url, data, func);

    其中data如果存在则使用POST方式发送请求,不存在则使用GET方式发送请求。


    举例:

    <div id="ret"></div>
    $('#ret').load(
        "/greet",
        {name: 'Brad'}
    );


    $.getScript()


    该方法使用GET方式执行Ajax请求,从服务器加载并执行回传的JavaScript。

    形式:$.load(url, func);



    代码


    下面使用Python Flask与jQuery对这6个Ajax方法做简单演示,jQuery为1.11.3版本。

    后端Python:

    #!/usr/bin/env python
    # coding=utf-8
    
    import json
    from flask import Flask, request, render_template as rt
    
    app = Flask(__name__)
    
    
    @app.route('/', methods=['GET'])
    def index():
        return rt('greet.html')
    
    
    @app.route('/greet', methods=['GET', 'POST'])
    def greet():
        # GET上传的数据用request.args获取,POST上传的数据用request.form获取
        if request.method == 'GET':
            name = request.args.get('name')
            ret = {'result': 'hi, %s' % name}
        else:
            name = request.form.get('name')
            ret = {'result': 'hello, %s' % name}
    
        return json.dumps(ret)
    
    
    if __name__ == '__main__':
        app.run(debug=True)
    


    前端:

    <html>
    <body>
    <button οnclick="login1()">发送1</button>
    <button οnclick="login2()">发送2</button>
    <button οnclick="login3()">发送3</button>
    <button οnclick="login4()">发送4</button>
    <button οnclick="login5()">发送5</button>
    <div id="ret"></div>
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    <script type="text/javascript">
        function login1() {
            $.ajax({
                url: "{{ url_for('greet') }}",
                data: {name: 'jenny'},
                type: "POST",
                //dataType: "json",
                success: function(data) {
                    // data = eval("(" + data+ ")");
                    data = jQuery.parseJSON(data);  // dataType注释了,故注意反序列化
                    $("#ret").text(data.result);
                }
            });
        }
    
        function login2() {
            $.get(
                "{{ url_for('greet') }}",
                {name: 'Brad'},
                function(data) {
                    $("#ret").text(data.result);
                },
                "json"
            );
        }
    
        function login3() {
            $.getJSON(
                "{{ url_for('greet') }}",
                {name: 'jenny'},
                function(data) {
                    $("#ret").text(data.result);
                }
            );
        }
    
        function login4() {
            $.post(
                "{{ url_for('greet') }}",
                {name: 'Brad'},
                function(data) {
                    $('#ret').text(data.result);
                },
                "json"
            );
        }
    
        function login5() {
            $('#ret').load(
                "{{ url_for('greet') }}",
                {name: 'Brad'}
            );
        }
    
    </script>
    </body>
    </html>


    文中如有不当之处,还望包容和指出,感谢~


    展开全文
  • 前端向后端发送Ajax请求

    千次阅读 2020-08-17 17:18:18
    1、铺垫工作:在main.js文件中添加上述两行代码 2、这里需要有const _this = this,即先将当前的this保存起来,因为发送ajax请求里的this表示的回调函数里的this,不是表示当前对象的this,然后再写_this....

    注意:把下面beforeCreate改成created

    在这里插入图片描述

    代码:

    beforeCreate() {
          const _this = this
          this.$axios.get('http://localhost:8080/homeTotalData').then(function (resp) {
            _this.homeTotalData = resp.data
          })
        }
    

    注意:

    1、铺垫工作:在main.js文件中添加上述两行代码
    在这里插入图片描述
    2、这里需要有const _this = this,即先将当前的this保存起来,因为发送ajax请求里的this表示的回调函数里的this,不是表示当前对象的this,然后再写_this.homeTotalData = resp.data

    展开全文
  • vue向后台发送ajax请求的两种方式

    万次阅读 2019-02-27 17:48:08
    琰哥踩过的那些坑之——VUE的ajax请求 项目需求中有些数据需要遍历,这种情况下vue算是比较合适的,这里只是对vue的简单运用,采用的是引入js的方式。 有两种方式,一种是引入“vue-resource.js”, 另一种则是...
  • 前端使用Jquery发送ajax请求

    千次阅读 2020-06-28 16:36:03
    这篇文章教大家如何使用jquery发送简单的ajax请求 前言 Ajax 一个向后端发送请求的方式。 使用 JQuery里怎么调用Ajax? 首先得引入JQuery 附上jquery下载链接https://www.bootcdn.cn/jquery/ 发送请求...
  • ajax发送请求的三种方式

    千次阅读 2019-05-10 09:11:12
    概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML ...在服务器处理请求的过程中,客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 [1...
  • 原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,
  • vue实战——vue中发送AJAX请求

    万次阅读 多人点赞 2018-05-14 17:52:49
    vue中发送AJAX请求 一、简介 1)vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 2) axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-...
  • 原生JS发送ajax请求

    千次阅读 2017-09-25 19:56:01
    既然要发送ajax请求,那ajax是什么呢? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 通俗点来说就是可以让你在不刷新(重载)网页的情况下...
  • 原生js发送ajax请求

    万次阅读 2018-08-22 15:09:14
    原生js发送ajax请求原理 1.什么是ajax AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。推荐文章:ajax是什么。 个人理解:ajax就是在不刷新网页的情况下和后台交互数据。 2. ...
  • 如何在Thymeleaf中实现ajax请求url的可靠构造
  • 使用jquery发送ajax请求

    千次阅读 2017-05-12 21:40:03
    发送的内容的格式例如下面这段:function do_upload() { $.ajax({ url: '/login.html', type: 'POST', data: 'username=admin&password=123', async: true, cache: false, contentType: false, proc
  • java代码发送ajax请求(post)

    千次阅读 2019-11-04 15:53:39
    /** * 只需要改一个url 和 data 参数 后面都不变都是固定的 */ public static String ...// 请求地址 String url = “https://eco.taobao.com/router/rest”; //以集合的 传递值 List parameForToken = new A...
  • 循环发送ajax请求

    千次阅读 2016-08-23 11:30:30
    循环发送ajax请求解决方案
  • 方式一使用Axios发送Ajax请求   该方式无论是Vue还是React甚至其他一些框架中,都普遍常用,它支持promise方式,在使用axios库之前,应该先在终端下使用npm或者cnpm全局安装一下 npm install -S axios 或者cnpm ...
  • 首页 使用axios 发送ajax请求

    千次阅读 2018-05-21 10:03:39
    打开码云 创建分支 index-ajax 然后cd到文件夹 输入 git pull 然后 git checkout index-ajax然后输入git status ...然后git status在vue中发送ajax可以使用fetch 还有vue-resource 目前最火的是axios,在浏览器端axi...
  • AJAX发送请求(GET方式)

    千次阅读 2018-05-16 19:27:58
    AJAX请求 首先我们看一下效果 PHP部分 HTML部分 接下来我们进入AJAX部分。 那AJAX判断用户名就非常简单易懂了 AJAX部分 AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的...
  • 一、JavaScript、jQuery、ajax简介 1.JavaScript: JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的...
  • 使用axios发送ajax请求

    千次阅读 2018-09-07 13:02:40
    假如我们页面中有许多个组件组成,每个组件都有自己的json数据,如果每个组件都单独请求一个ajax,那么整个页面就会发送许多个ajax请求,这样的页面运行肯定是很慢的 那么怎么样做才合理呢? 我们希望整个首页只...
  • Vue 定时发送ajax请求

    千次阅读 2018-04-08 19:02:06
    使用箭头函数:
  • AJAX发送请求(POST方式)

    千次阅读 2018-05-16 20:03:45
    AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术: 这里介绍一下AJAX发送请求(POST) POST比GET提交方式更安全,不会在网址中显示信息 首先我们看一下效果 常见场景:输入...
  • 前端向后端发送Ajax请求的跨域问题

    千次阅读 2020-08-17 17:25:57
    1、建包:cors 2、建类:CorsConfig 3、复制粘贴代码: import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry;...
  • 两台nginx服务器,一台nginx服务部署了一个H5页面,另一台nginx服务器部署了后台服务,手机访问该H5页面,在该页面上发送了一个ajax请求,则后台服务器接收到的是 nginx服务器的ip地址还是手机端的ip地址
  • 前言: 在写Python项目的时候,单独的js文件发送ajax请求,并不起效果并且提示路径错误 错误原因分析: {% url 'myadmin_updategoodsgrade' %} # 是模板中的标签 # 当解析输出到浏览器中的html,会把url解析成实际的url...
  •   今天遇到了问题把我难住了,解决之后就赶紧来记下来 这是一个很简单的更新用户的问题 ...接下来就是jsp页面的东西,ajax发送id function editCustomer(id) { $.ajax({ type:"...
  • AJAX发送GET请求和POST请求

    千次阅读 2019-05-06 10:42:47
    ajax全称就是 async javascript and xml , 意思就是 异步的javascript和XML 要向服务器发行请求,要通过 XMLHttpRequest模块实现,但是呢,XMLHttpRequest模块基本上所有浏览器都支持(IE7及以上都支持),IE6及...
  • DOCTYPE html> <html> <head> <title>页面刷新或关闭时发送ajax请求</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script type="text/javascript"> $...
  • 通过 ajax 发送 PUT、DELETE 请求有以下两种方式: 一、普通请求方法发送 PUT 请求 1. 如果不用 ajax 发送 PUT,我们可以通过设置一个隐藏域设置 _method 的值,如下: <form action="/emps" method="post...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 195,375
精华内容 78,150
关键字:

发送ajax请求的方式