首页 > 其他分享 >ajax-jquery

ajax-jquery

时间:2023-04-20 09:33:12浏览次数:38  
标签:jquery 请求 callback URL xhr ajax data

1、介绍

jquery支持ajax,需要导入jsqury库后使用。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

2、load

load() 方法从服务器加载数据,并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);
  • selector:元素选择器
  • url:希望加载的数据来源,必选
  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");
//把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt – 包含调用成功时的结果内容
  • statusTXT – 包含调用的状态
  • xhr – 包含 XMLHttpRequest 对象
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

3、get

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
  • URL:发送请求的 URL字符串。
  • data:可选的,发送给服务器的字符串或 key/value 键值对。
  • callback:可选的,请求成功后执行的回调函数。
  • dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });

4、post

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
  • URL:发送请求的 URL字符串。
  • data:可选的,发送给服务器的字符串或 key/value 键值对。
  • callback:可选的,请求成功后执行的回调函数。
  • dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });

5、ajax

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

(1)async

可选值:true/false,默认是true表示异步处理

(2)url

数据提交的地址,默认是当前页面

(3)type

可选值:GET/POST,提交方法

(4)dataType

预期的服务器响应的数据类型。实际就是设置请求中accept字段

(5)data

规定要发送到服务器的数据。

(6)cache

布尔值,表示浏览器是否缓存被请求页面。默认是 true。

(7)contentType

发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。

(8)其他

beforeSend(xhr):发送请求前运行的函数。

complete(xhr,status):请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。

dataFilter(data,type):用于处理 XMLHttpRequest 原始响应数据的函数。

error(xhr,status,error):如果请求失败要运行的函数

success(result,status,xhr):当请求成功时运行的函数。

context:为所有 AJAX 相关的回调函数规定 “this” 值。

timeout:设置本地的请求超时时间(以毫秒计)。

scriptCharset:规定请求的字符集。

username:规定在 HTTP 访问认证请求中使用的用户名。

traditional:布尔值,规定是否使用参数序列化的传统样式。

xhr:用于创建 XMLHttpRequest 对象的函数。

global:布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。

ifModified:布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。

jsonp:在一个 jsonp 中重写回调函数的字符串。

jsonpCallback:在一个 jsonp 中规定回调函数的名称。

password:规定在 HTTP 访问认证请求中使用的密码。

processData:规定在 HTTP 访问认证请求中使用的密码。

6、ajax报文分析

ajax的html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function fun(){
	$.ajax({
url:"http://120.48.75.111/a.php?name=张三'<>",
type:"post",
data:"abc=张三'<>\""
})
}
</script>
</head>
<body>
<button onclick=fun()>点击</button>
</body>
</html>

请求报文:

POST /a.php?name=%E5%BC%A0%E4%B8%89%27%3C%3E HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Content-Length: 14
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: 120.48.75.111
Origin: http://120.48.75.111
Proxy-Connection: keep-alive
Referer: http://120.48.75.111/wordpress/abc.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.5249.62 Safari/537.36
X-Requested-With: XMLHttpRequest

abc=张三'<>"

分析:

  • 默认的content-type为url编码,但是不会对表单数据进行自动编码,需要手动进行
  • 默认接收任何响应类型
  • 默认具有referer和origin字段
  • 具有非正式头部字段X-Requested-With

 

标签:jquery,请求,callback,URL,xhr,ajax,data
From: https://www.cnblogs.com/wd404/p/17335625.html

相关文章

  • 事件 jQuery 选择器 筛选器 样式操作 CSS操作 文本操作
    事件事件可以理解为:给HTML标签添加了一些额外的功能,并且能够触发JS的代码运行1.事件就是达到某个触发条件,自动触发的动作2.常用的事件 1.onclick:当用户点击某个对象是调用的事件句柄2.onfoucus:元素获取焦点3.onblur:元素失去焦点4.onchange:域的内容被改变5.onload:......
  • 分享下之前做的STM32嵌入式Web完整设计教程和案例html,Ajax,Javacript,XML,cgi等
    这段时间好些网友咨询,特此再分享下:http://www.armbbs.cn/forum.php?mod=viewthread&tid=26034如果需要外网也可以访问,此贴:【专题教程第3期】开发板搭建Web服务器,利用花生壳让电脑和手机可以外网远程监控,手机4G访问域名效果:   微信公众号:armfly_com......
  • jQuery
    目录jQueryjQuery内容jQuery语法标签查找补充:标签对象和jquery对象基本选择器属性选择器表单筛选器表单对象属性筛选器方法样式操作位置操作CSS操作尺寸文本操作属性操作文档处理克隆常见事件事件绑定移除事件阻止后续事件执行阻止事件冒泡页面加载事件委托jQuery优点1.jQuery......
  • jquery遍历节点
    <table><tbody><tr><td><table><tbody><trclass="s">......
  • jQuery
    目录jQuery先学会如何查找标签基本选择器补充:标签对象和jQuery对象其他选择器基本筛选器:例子:表单属性选择器表单对象属性筛选器方法样式操作文本操作(掌握)label的作用属性操作文档处理添加到指定元素内部的后面添加到指定元素内部的前面添加到指定元素外部的后面添加到指定元素外......
  • 客服系统vue源码聊天界面,ajax上传图片功能实现
    在线客服系统的聊天界面上,有上传图片按钮功能,使用js实现ajax上传图片功能html部分,有一个点击事件<divclass="iconExtendBtn"@click="uploadImg"><divclass="elIconel-icon-picture"></div>......
  • jQuery Templates模板插件
    jQuery团队提供了一个模板插件,但非常可惜的是jquery团队放弃对其维护,我们对其方法和语法进行简单简绍源码官方的网址:http://api.jquery.com/category/plugins/templates文档的网址:http://api.jquery.com/category/plugins/templates使用该插件必须先引入对应js //依赖jquery<sc......
  • Ajax
    1.简介AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和XML)。AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在2005年,Google通过其GoogleSugg......
  • python s12 day13 JavaScript、Dom和jQuery
    1.JavaScriptJavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。1、JavaScript代码存在形式<!--方式一--><scripttype"text/javascript"src="JS文件"></script>......
  • jquery中prop()方法和attr()方法的区别
    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢?大家都知道有的浏览器只要写dis......