美文网首页
基于JQuery的ajax前后端数据交互

基于JQuery的ajax前后端数据交互

作者: LazyCat404 | 来源:发表于2019-05-15 11:13 被阅读0次

打开页面即发送请求

$(document).ready(function(){  //打开页面执行
    $.post("",{},function(data){ //发送请求,data 为接收的数据
        //方式1
        var content='content='+data;
        eval(content); //把数据进行转换,用content.调用,eval 是魔鬼!!!
        //方式2 (推荐)
        var content = JSON.parse(data);
    })
});

像后台发送内容(不包含文件)

$.ajax({
    url:"",  //发送文件文件地址
    type:"post",   //发送方式post/get ……,也可以用method指定请求方式
    headers: { 'Accept':' */*' },  //按需求填,一般不用写
    async:false,  //同步
    contentType: 'application/json',  // 发送json 时添加,否则发送的是formdata
    dataType:'json',  // 发送json 时添加,否则发送的是formdata
    data:{  //发送的数据,如果发json -> data:JSON.stringify(json);
        "name":key,//name自己定,key事先获取
    },   
    success:function(data){ //成功执行方法
        if(data==0){
            window.location.href='/';//页面重定向
        }
    }
})

PS:上边两种ajax写法作用相同,第一种是简写

向后台发送文件+数据

var formdata=new FormData(); // 发文件一定要有这句话
// 获取到文件
var oFiles = document.querySelector("input#Idfile2");    
//将文件添加到发送的结果里,oFiles 要一样
formdate.append(oFiles.name, oFiles.files[0]);
//上传文件写在前边
//input 输入内容 val()
var text = $("input[type='text']").eq(i).val(); 
//把内容添加到传送结果里
formdata.append(text.attr("name"),text); 
//有文件传输时要这样写
$.ajax({
    url:"",//请求地址(后端接口)
    type:"post",//请求方式
    async:false,
    data:formdata,
    cache: false,  
    contentType: false,
    processData: false, 
    //data 是后台返回来的值,可自己取名 
    success:function(data){   
        if(data==0){
            //打开一个新的页面
            window.location.href='/'; 
        }
    }
})

json发送(简写)

$("").click(function(){ //点击执行函数
    //先创建一个对象
    var obj = {}; 
    //  xxx 为自定义
    obj.xxx = $("input[name$='name']").val(); 
    //(必须要写),把对象变成json   
    var abc = JSON.stringify(obj);
    $.post("", {"data": abc}, function (ct) {   
        //省略
    })
});

最后再来粗略的说一下ajax中的一些参数,

async

async: true,默认为true,即异步方式,ajax 执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。
async:false,同步请求,在没有得到后端返回值之前,不继续向下执行。

cache

cache只在type:get下有效。
cache: false,在url后面加一个时间缀,不缓存,从服务器上重新获取数据。
cache: true,读取缓存,如果数据已经请求过,则不再请求服务器。

contentType

表示发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。默认值为:contentType : "application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。但是当使用formData传输文件时,http协议中并不支持文件传输,所以 contentType: false,则避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件。

processData

要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类 型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

相关文章

  • 前后端交互

    1 前后端交互模式 1.1接口调用方式: 原生AJAX 基于JQuery的AJAX fetch axios 原生的...

  • 前端学习笔记二十六-Vue之前后端交互

    一、前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 Java...

  • 基于JQuery的ajax前后端数据交互

    打开页面即发送请求 像后台发送内容(不包含文件) PS:上边两种ajax写法作用相同,第一种是简写 向后台发送文件...

  • 前端文件下载方案汇总

    通常前后端数据交互都是用JQuery的ajax函数,其返回类型只有xml、text、json、html等类型,没有...

  • 基于jquery的Ajax数据交互

    1、客户端与服务器 服务器:存放和对外提供资源的电脑(eg:饭馆) 客户端:获取和消费资源的电脑(个人电脑),通过...

  • ajax的运用

    交互 form 提交: ajax: jquery的ajax: ajax做交互

  • 你不知道的前后端分离(2)

    上一篇文章前后端分离之交互(1)我们讲到了如何使用JQuery发起ajax请求,从后端接口获取前端需要的数据。JQ...

  • JQuery入门

    零) js / ajax / json / jQuery js: 基于对象, 解释型, 事件驱动, 浏览器交互执行...

  • 前端纯js(html+css+jquery+ajax)实现网站页

    自己封装了一个基于html+css+jquery+ajax封装了一个网站页面获取后端数据并进行条件筛选的功能,复用...

  • 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时...

网友评论

      本文标题:基于JQuery的ajax前后端数据交互

      本文链接:https://www.haomeiwen.com/subject/qhbuaqtx.html