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. 安装node.js 附带node.js以及npm初步认识 设置淘宝/npm镜像 命令
  2. 2021年，AI能否进军加密领域？
  3. 【VMCloud云平台】私有云门户第一朵Web云（一）
  4. C++11新特性中的匿名函数Lambda表达式的汇编实现分析（二）
  5. Renascence架构原理——遗传规划算法
  6. python aes_python AES 加密
  7. WPF中打印问题的探讨[转]
  8. 使用nginx做反代时遇到413 Request Entity Too Large的解决方法
  9. File(File f, String child) File(String parent, String child)
  10. 线程通信之handle用法
  11. CURL命令模拟Http Get/Post以及带cookies调用接口
  12. 【数据挖掘】数据挖掘简介及十大经典算法
  13. Flask框架学习笔记9-jinjia2模板语言
  14. CNS服务器搭建（配合百度直连）
  15. Nature子刊 定制饮食去除半胱氨酸和蛋氨酸可诱导细胞自毁进而治疗脑瘤？
  16. 学习数据结构--第六章：查找（查找）
  17. 店宝宝：淘宝直播到底应该怎么做？
  18. 隐藏的html标签页,隐藏网页代码的一种方法
  19. 給藍軍朋友的敗選感言
  20. LE5010蓝牙芯片（凌思微）开发总结

热门文章

  1. GPS接收机（一）概述
  2. python调用函数示例_Python使用execjs运行JS函数示例,python,execJS,例子
  3. qtCreator下valgrind使用教程
  4. 基于IPFS去中心化相册以太坊Dapp
  5. 简单的Winform秒表工具
  6. 关于java中的finalize()方法
  7. 智能硬件产品系列 之 MTK6580方案篇（一）硬件选型
  8. mac-怎么查询mac苹果电脑的保修期
  9. 0111总结-函数与极限-高等数学
  10. slice,split,splice的区别与用法