JS，Jquery发起ajax的方式总结

JS中有两种发起ajax的方式：

GET方式:

<script type="text/javascript">var ajaxObj = new XMLHttpRequest();ajaxObj.open("GET", "selectProvice?id=1");ajaxObj.send()ajaxObj.onreadystatechange = function() {if (ajaxObj.readyState === 4 && ajaxObj.status) {alert("发送成功");}}</script>

POST方式：

<script type="text/javascript">var ajaxObj=new XMLHttpRequest();ajaxObj.open("POST","selectProvice?id=1");ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");// multipart/form-data 默认的以二进制方式传送ajaxObj.send(null);ajaxObj.onreadystatechange= function ()if(ajaxObj.readyState===4&&ajaxObj.status===200){alert("发送数据成功");}}
</script>

ajax获取从服务器返回的数据是 ajaxObj.responseText获取
ajax 给服务器发送数据: get post
get: url重写(拼接) ---- 数据量小简单数据不安全
post:send(数据) 请求体(页面看不到) 数据量大简单或复杂数据安全
application/x-www-form-urlencoded表示表单默认以字符串的形式发送
multipart/form-data 表单数据以二进制流的方式发送
ajaxObj.setRequestHeader其实就是修改请求头(请求报文)里面的额Content-type值

Jquery有三种发起ajax的方式：

jquery 提供了三种 ajax 请求的函数，分别为： $.ajax() , $.get() , $.post() ，下面是一个 jquery 实现ajax

get方式

<script type="text/javascript">$(function(){$.ajax({url : "AjaxJson", //请求urltype : "POST", //请求类型  post|get// data : "key=value&key1=value2",  //后台用 request.getParameter("key");dataType : "json",  //返回数据的 类型 text|json|html--success : function(users){ //回调函数 和 后台返回的 数据// var users = JSON.parse(data);var tBody = $("#tbBody");for(var i=0; i<users.length; i++){  //通过遍历，创建行数据var tr = $("<tr><td>"+users[i].id+"</td><td>"+users[i].name+"</td><td>"+users[i].school+"</td></tr>")tBody.append(tr);}}});});</script>

get方式

 $.get(url,data,callback,type); // data为 发送的数据  {key:value}形式 ， //    callback成功时的回调函数 function(result){}  result 后台返回的数据// type  返回的数据类型  默认为 text ,可以设为 json text
例子：
$.post("url",{name:"小钱",age:"20"},function(date,Status){if(Status=="success"){alert("成功");}});

post方式

 $.post(url,data,callback,type);

参考来源：
https://blog.csdn.net/dadadashixiong/article/details/78878247
https://blog.csdn.net/qq_37176126/article/details/73277972

JS，Jquery发起ajax的方式总结相关推荐

js循环发起ajax请求
js循环发起ajax请求工作中会遇到如下类似场景: 前端请求一个文章列表的接口A,A返回了所有的文章列表.而文章内容需要拿着A返回的每条Id去请求文章详情接口B. 这种情况下需要循环请求,因为aja ...
jQuery 发起 Ajax 请求最常用的三个方法
浏览器中提供的 XMLHttpRequest 用法比较复杂,所以 jQuery 对 XMLHttpRequest 进行了封装,提供了一系列 Ajax 相关的函数,极大地降低了 Ajax 的使用难度. ...
JQuery发起ajax请求，并在页面动态的添加元素
页面html代码: <li><div class="coll-tit"><span class="coll-icon">&l ...
实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[' ...
jQuery的ajax获取数据渲染页面
一.ajax的请求方式 post $.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务 ...
jq中法可以发起ajax请求的方法有,js与jQuery终止正在发送的ajax请求的方法
本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({type: "POST",url: & ...
html form通过ajax提交表单提交数据,Jquery通过Ajax方式来提交Form表单的具体实现
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

JS，Jquery发起ajax的方式总结

Jquery有三种发起ajax的方式：

JS，Jquery发起ajax的方式总结相关推荐

最新文章

热门文章