jQuery-Ajax的使用

最近仙鱼在做一个小项目，被这个异步请求搞得很烦，于是今天决定来啃一啃这块大骨头。

啃完发现，嗯真香希望你看完也会有收获。

本篇博客有以下两大内容：

  • 在开始之前,先做一个小提醒,如果你的项目是基于SSM框架,在处理ajax请求的handller方法上一定不要忘了打上@ResponseBody这个注解呀,ψ(._. )>或者,你可以试试不加看看前端页面有没有反应,嘿嘿~

  • 还有一点，再使用时jQuery时请别忘记在页面上引入你喜欢版本的jQuery.js库

  • ps:因为CSDN编辑器的小问题,在编辑时加$有时候会转义成格式,就不显示 $ 所以有的地方我在$ .get()中间加了一个空格,是为了调整博客不显示的问题,实际上写的时候不加空格的,haha,你们明白就好~

1 原生Ajax和$.ajax()

  • 原生的Ajax和$.ajax()适合发送put，delete请求（get，post当然也可，你需要对“restful”有一定的了解）或者发送json字符串时使用。

1.1 原生Ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>ajax GET/POST</title>
</head>
<body>
<div id="show"></div>
<input type="button" value="ajax发送get请求" οnclick="ajaxDoGet()">
<input type="button" value="ajax发送post请求" οnclick="ajaxDoPost()">
<script type="text/javascript">function ajaxDoGet() {//1.创建XMLHTTPRequest对象var xhl = new XMLHttpRequest();//2.设置onreadystatechange回调函数(异步，如果同步不需要)xhl.onreadystatechange = function () {if (xhl.readyState == 4 && xhl.status == 200) {// document.getElementById("show").innerHTML = xhl.responseText;alert(xhl.responseText);}}//3.open method get/post url 异步还是同步xhl.open("get", "ajaxservlet?username=Tom&address=北京", true);//4.sendxhl.send();}function ajaxDoPost() {//1.创建XMLHTTPRequest对象var xhl = new XMLHttpRequest();//2.设置onreadystatechange回调函数(异步，如果同步不需要)// console.log(xhl.readyState);xhl.onreadystatechange = function () {if (xhl.readyState == 4 && xhl.status == 200) {// document.getElementById("show").innerHTML = xhl.responseText;alert(xhl.responseText);}}//3.open method get/post url 异步还是同步xhl.open("post", "ajaxservlet", true);xhl.setRequestHeader("content-type", "application/x-www-form-urlencoded");//4.sendxhl.send("username=Tom&address=北京");}
</script>
</body>
</html>

1.2 $.ajax()

  • 这个是仙鱼最喜欢的一个方法,对的记住这个方法是大boss就好啦~

<javascript type="text/javascript">$.ajax({url:"${pageContext.request.contextPath}/user/getAllUsers",type:'post',//data可以直接拼接在url后面,也可以在下面进行设置data:"name=张三&age=19",contentType:"application/x-www-form-urlencoded",//dataType:"html",dataFilter:"json",async:true,//默认是异步,你觉得这个还需要写吗?success:function(data){alert(data);},});
</javascript>

2 jQuery五种快捷API方法

2.1 $ .get()/$.post()

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

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

<script type="text/javascript">function get() {$.get("${pageContext.request.contextPath}/user/getAllUsers",function(data,callbacktype,jqXHR){alert(data);});}//一般来说,回调函数的三个参数我们只用datafunction post() {$.post("${pageContext.request.contextPath}/user/getAllUsers",function(data,callbacktype,jqXHR){alert(data);});}
</script>

2.2 $(selector).load(url,[data],[callback])

<scirpt type="text/javascript">function doLoad(){//mydiv为我自己定义的一个div的id$("#mydiv").load("${pageContext.request.contextPath}/user/getAllUsers",function(){alert("Success!");});}
</scirpt>

2.3 $ .getJSON()/$.getScript()

$.getJSON(url,[data],[callback])

$.getScript(url,[callback])

3 Over

希望我的博文能对你有帮助,不足之处还请在评论中给出~

( •̀ ω •́ )✧感谢阅读,仙鱼祝您学习生活愉快~

jQuery-Ajax的使用相关推荐

  1. Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常

    我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...

  2. Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

    当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx ...

  3. Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...

  4. jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQuer ...

  5. jquery ajax java上传文件_jQuery Ajax方式上传文件的方法

    jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...

  6. jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据

    jquery Ajax实现Select动态添加数据,具体内容如下 1.背景 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...

  7. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  8. java ajax datatype_理解jquery ajax中的datatype属性选项值

    jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字 ...

  9. jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...

  10. jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量

    jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量 jquery <!DOCTYPE html> <html lang="en&qu ...

最新文章

  1. 如果有一天程序员再也不忙了
  2. Go mod 七宗罪
  3. LeetCode 1940. 排序数组之间的最长公共子序列（二分查找）
  4. php选择数据表,PHP SQL,一次从3个表中选择相应的数据？
  5. Python Base64
  6. 播放超1200w，仅21w粉的B站UP主靠带货也能引爆B站
  7. python变量名包括_python中变量的命名以及使用
  8. 软件测试周刊（第24期）：最不重要的素质就是智商
  9. 车架号 生成 java_JAVA匹配车架号以及生成虚拟车架号
  10. Hive解决return code 3问题
  11. c程序设计语言第五单元,人教版七年级语文下册第五单元复习题
  12. 2020.3.23 bugku(21-25)
  13. 库卡机器人是s7编程_青岛KUKA库卡机器人编程调试，维保，科普无限，崇尚科学...
  14. 2.1_3 Oracle float number类型 详解 + 测试实例（测试小数发现BUG）
  15. Windows server 2012R2 设置文件共享目录报错：无法连接到C$管理共享已验证文件夹xxx在计算机xxx上是否存在
  16. 走进web（关于web、web1.0、web2.0、web3.0）
  17. 关于高考志愿填报那些事(个人经验，仅供参考)
  18. 认知结构（C# Struct）
  19. PPG李亮：公司运营很好 我不屑出来解释
  20. c#中的interface abstract virtual override和new

热门文章

  1. Python的数据库
  2. Promise的作用及用法
  3. jQuery Promise 的用法
  4. 串口通信协议示例与分析
  5. 毛星云opencv之SHi-Tomasi角点检测综合程序
  6. pc机串口通讯实验c语言,单片机实验六 单片机与PC机串口通讯
  7. EEPROM, NAND FLASH, NOR FLASH
  8. 华为DHCPv6实验配置
  9. Android Binder驱动的工作机制之要旨
  10. 《人力资源管理》在线作业