1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>get方式</title>
  6. <style>
  7. .loading{
  8. color: red;
  9. font-size: 16px;
  10. display: inline-block;
  11. margin-top: 10px;
  12. font-family: "微软雅黑";
  13. display: none;
  14. }
  15.  
  16. </style>
  17. <script src="jquery-1.8.1.js"></script>
  18. <script>
  19. $(document).ready(function(){
  20. // GET请求
  21. // 第一种
  22. // $('#btn').click(function(){
  23. // //alert(1);
  24. // $.get('test.php?url=baidu1', function(response, status, xhr){
  25. // //$('#div1').html(response); // 请求返回的内容
  26. // console.log(status); // 请求的状态 success / error
  27. // $('#div1').html(xhr.responseText); // 请求返回的内容
  28. // });
  29.  
  30. // 第二种
  31. // $('#btn').click(function(){
  32. // //alert(1);
  33. // // data 数据的等号两端没有空格
  34. // $.get('test.php', 'url=baidu', function(response, status, xhr){
  35. // $('#div1').html(response); // 请求返回的内容
  36.  
  37. // });
  38.  
  39. // });
  40.  
  41. // 第三种
  42. // $('#btn').click(function(){
  43. // //alert(1);
  44. // // data 数据用json的形式
  45. // $.get('test.php', {url: 'baidu'}, function(response, status, xhr){
  46. // $('#div1').html(response); // 请求返回的内容
  47.  
  48. // });
  49.  
  50. // });
  51.  
  52. // POST请求
  53. // POST 可以使用字符串形式的键值对传参, 自动转化为http消息实体传参
  54. // $('#btn').click(function(){
  55. // // data 数据用json的形式
  56. // $.post('test.php', 'url=baidu', function(response, status, xhr){
  57. // $('#div1').html(response); // 请求返回的内容
  58.  
  59. // });
  60.  
  61. // });
  62.  
  63. // // 方法二
  64. // // post 可以使用对象键值对传参
  65. // $('#btn').click(function(){
  66. // // data 数据用json的形式
  67. // $.post('test.php', {url: 'baidu'}, function(response, status, xhr){
  68. // $('#div1').html(response); // 请求返回的内容
  69.  
  70. // }, 'html');
  71.  
  72. // });
  73.  
  74. // 方法二
  75. // post 可以使用对象键值对传参
  76. // $('#btn').click(function(){
  77. // // data 数据用json的形式
  78. // // $(response)[0].url
  79. // $.post('test.json', function(data){
  80. // //$('#div1').html(response); // 请求返回的内容
  81.  
  82. // var html = '', $dom = $('#div1');
  83. // //alert($(response)[0].url);
  84.  
  85. // //alert(data[0].url);
  86. // $.each(data, function(k, v){
  87. // //alert(v['url']);
  88. // html = $('<p>'+"请求的地址是:"+v['url']+'</p>');
  89. // $dom.append(html);
  90.  
  91. // });
  92.  
  93. // });
  94.  
  95. // });
  96.  
  97. // // getJSON()
  98. // // 请求的只能是JSON格式的, 没有第四个参数 type
  99. // $('#btn').click(function(){
  100. // $.getJSON('test.json', function(data){
  101. // //$('#div1').html(response); // 请求返回的内容
  102. // var html = '', $dom = $('#div1');
  103. // $.each(data, function(k, v){
  104. // //alert(v['url']);
  105. // html = $('<p>'+"请求的地址是:"+v['url']+'</p>');
  106. // $dom.append(html);
  107.  
  108. // });
  109.  
  110. // });
  111.  
  112. // });
  113.  
  114. // getScript()
  115. // 异步加载js文件
  116. // $('#btn').click(function(){
  117. // $.getScript('test.js');
  118. // });
  119.  
  120. // $.ajax(); 只传一个参数
  121.  
  122. // 最底层的一个方法
  123. // $('#btn').click(function(){
  124. // $.ajax({
  125. // type: 'POST',
  126. // url: 'test.php',
  127. // data: {url: 'baidu'},
  128. // success: function(response, status, xhr){
  129. // $('#div1').html(response);
  130. // }
  131.  
  132. // });
  133. // });
  134.  
  135. // ajax 表单序列化
  136. //
  137. // $('#btn1').click(function(){
  138. // $.ajax({
  139. // type: 'POST',
  140. // url: 'form.php',
  141. // data: {
  142. // user: $('input[name=user]').val(),
  143. // mail: $('input[name=mail]').val(),
  144. // },
  145. // success: function(response, status, xhr){
  146. // $('#div1').html(response);
  147. // }
  148.  
  149. // });
  150. // });
  151.  
  152. // 表单序列化
  153. // data: $('#form1').serialize()
  154. // $('#btn1').click(function(){
  155. // $.ajax({
  156. // type: 'POST',
  157. // url: 'form.php',
  158. // data: $('#form1').serialize(),
  159. // success: function(response, status, xhr){
  160. // $('#div1').html(response);
  161. // }
  162.  
  163. // });
  164. // });
  165.  
  166. // $('input[name=sex]').click(function(){
  167. // var value = $(this).serialize();
  168.  
  169. // $('#div1').html(decodeURIComponent(value));
  170. // });
  171.  
  172. // 还有一个可以返回JSON数据的方法
  173. // $('input[name=sex]').click(function(){
  174. // var value = $(this).serializeArray();
  175. // console.log(value);
  176. // $('#div1').html(value[0].name+'='+value[0].value );
  177. // //console.log(value);
  178. // //$('#div1').html(value);
  179. // //$('#div1').html(decodeURIComponent(value));
  180. // });
  181.  
  182. // ajaxSetup(); 初始化重复属性
  183. // $('#btn1').click(function(){
  184. // $.ajax({
  185. // success: function(response, status, xhr){
  186. // //alert(response);
  187. // $('#div1').html(response);
  188. // }
  189. // })
  190. // });
  191. // $.ajaxSetup({
  192. // type: 'POST',
  193. // url: 'form.php',
  194. // data: $('#form1').serialize()
  195. // });
  196.  
  197. // $.param(); 解对象键值对的
  198. // $('#btn1').click(function(){
  199. // $.ajax({
  200. // type: 'POST',
  201. // url: 'form.php',
  202. // data: $.param({
  203. // user: $('input[name=user]').val(),
  204. // mail: $('input[name=mail]').val(),
  205. // }),
  206. // success: function(response, status, xhr){
  207. // $('#div1').html(response);
  208. // }
  209.  
  210. // });
  211. // });
  212.  
  213. // $.ajaxStart() 请求开始时
  214. // $.ajaxStop() 请求结束时
  215. // $('#btn1').click(function(){
  216. // $.ajax({
  217. // type: 'POST',
  218. // url: 'form111.php',
  219. // data: $.param({
  220. // user: $('input[name=user]').val(),
  221. // mail: $('input[name=mail]').val(),
  222. // }),
  223. // success: function(response, status, xhr){
  224. // $('#div1').html(response);
  225. // },
  226. // //timeout: 200
  227. // //global: false
  228. // error: function(xhr, errorText, errorType){
  229. // alert(errorText+':'+errorType);
  230. // //$('#div1').html(errorType);
  231. // //alert(xhr.status +':'+ xhr.statusText); //error : not found
  232. // }
  233. // });
  234. // });
  235.  
  236. // $(document).ajaxStart(function(){
  237. // $('.loading').show();
  238. // }).ajaxStop(function(){
  239. // $('.loading').hide();
  240. // });
  241.  
  242. // post 请求错误的状态, 可以通过连缀.error()方法
  243. // $('#btn1').click(function(){
  244. // // data 数据用json的形式
  245. // $.post('test22.php', {url: 'baidu'}, function(response, status, xhr){
  246. // $('#div1').html(response); // 请求返回的内容
  247.  
  248. // }).error(function(xhr, errorText, errorType){
  249. // //alert(errorText+':'+errorType);
  250.  
  251. // //alert(xhr.status +':'+ xhr.statusText); //error : not found
  252. // });
  253.  
  254. // });
  255.  
  256. // $.ajax 加载json文件
  257. // $('#btn1').click(function(){
  258. // $.ajax({
  259. // type: 'POST',
  260. // // 如果请求的是json文件, 那默认的返回的类型就不用再写json了.
  261. // url: 'test.json',
  262. // // 如果是html格式的话, 那会把json文件的格式都给输出
  263. // //dataType: 'html',
  264. // dataType: 'json',
  265. // success: function(data){
  266. // //alert(data[0].url);
  267. // alert(data[0].url);
  268. // }
  269. // });
  270. // });
  271.  
  272. // ajax 跨域处理
  273.  
  274. // $('#btn1').click(function(){
  275. // $.ajax({
  276. // type: 'POST',
  277. // url: 'jsonp.php',
  278. // dataType: 'json',
  279. // success: function(data){
  280. // //{"name":"json","age":24,"sex":"女"}
  281. // var html='', $dom = $('<table></table>'), $div = $('#div1');
  282.  
  283. // $.each(data, function(){
  284. // //alert(data.name);
  285. // html = $('<tr><td>'+data.name+'</td><td>'+data.age+'</td><td>'+data.sex+'</td></tr>');
  286. // $div.append($dom.html(html));
  287.  
  288. // });
  289. // }
  290. // });
  291. // });
  292.  
  293. // ajax 跨域处理
  294.  
  295. $('#btn1').click(function(){
  296. // $.ajax({
  297. // type: 'POST',
  298. // url: 'http://www.20160305.com:12000/jsonp.php',
  299. // dataType: 'json',
  300. // success: function(data){
  301. // alert(data.name);
  302. // }
  303. // });
  304.  
  305. // $.getJSON('jsonp2.php?callback=?', function(data){
  306. // alert(data.name);
  307. // });
  308.  
  309. //远程
  310. // $.getJSON('http://www.20160305.com:12000/jsonp2.php?callback=?', function(data){
  311. // alert(data.name);
  312. // });
  313. // ajax 获取远程数据
  314. // 第一种方法
  315. // $.ajax({
  316. // type: 'POST',
  317. // url: 'http://www.20160305.com:12000/jsonp2.php?callback=?',
  318. // dataType: 'json',
  319. // success: function(data){
  320. // alert(data.name);
  321. // }
  322. // });
  323. // 第二种方法
  324. $.ajax({
  325. type: 'POST',
  326. url: 'http://www.20160305.com:12000/jsonp2.php',
  327. dataType: 'jsonp',
  328. success: function(data){
  329. alert(data.name);
  330. }
  331. });
  332.  
  333. });
  334.  
  335. });
  336.  
  337. </script>
  338.  
  339. </head>
  340. <body>
  341. <form action="" id="form1">
  342. 用户名: <input type="text" name="user" >
  343. 邮箱: <input type="text" name="mail" >
  344. <input id="btn1" type="button" value="点击提交">
  345. <input type="radio" name="sex" value="男">
  346. <input type="radio" name="sex" value="女">
  347. </form>
  348. <!-- <input id="btn" type="button" value="点击按钮"> -->
  349. <div id="div1">
  350. <span class="loading">正在努力加载中......</span>
  351. </div>
  352. </body>
  353. </html>

  

ajax 中的一些方法应用的更多相关文章

  1. ajax中的post方法中回调函数不执行的问题

    前一段时间接触了JQuery Ajax中的.post()方法和.get()方法,感觉到ajax的简洁和强大,当用到.post()方法时,去W3上查找相关的使用方法,感觉十分简单,用法很明了,然后,直接 ...

  2. jQuery ajax中使用serialize()方法提交表单数据示例

    <form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...

  3. jQuery中的Ajax几种请求方法

    在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...

  4. 【转】Ajax中send方法参数的使用(get/post)

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  5. Ajax中send方法的使用

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  6. 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

    juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...

  7. Ajax中Delete请求参数 后台无法获取的解决方法(Restful风格)

    方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...

  8. C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  9. CI框架中,判断post,ajax,get请求的方法

    CI框架当中并没有提供,类似tp框架中IS_POST,IS_AJAX,IS_GET的方法. 所有就得我们自己造轮子了.下面就介绍一下,如何定义这些判断请求的方法.其实很简单的. 首先打开constan ...

随机推荐

  1. C++模板特化

    一 ."函数模板"与"模板函数" 下面几行代码就是一个"函数模板" template <class T> T abs(T x) ...

  2. unity3d模型制作规范

    1. 单位,比例统一 在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. 2 ...

  3. 坑爹的对GBK编码的字符进行url编码

    url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...

  4. python3.x随手笔记2

    对象,价值观和类型 对象 Python的抽象的数据. 所有的数据在一个Python程序 表示对象或对象之间的关系. (在某种意义上,在 符合冯诺依曼模型的代码也“存储程序计算机” 由对象.) 每一个对 ...

  5. hdu--(1025)Constructing Roads In JGShining's Kingdom(dp/LIS+二分)

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  6. NSInternalInconsistencyException: loaded the "XXXView" nib but the view outlet was not set

    运行过程中App崩溃,报错如标题. 原因: viewController的view没有绑定xib的view. 解决方法: 在File's Owner中将view与viewController的view ...

  7. 百度Tera数据库介绍——类似cassandra,levelDB

    转自:https://my.oschina.net/u/2982571/blog/775452 设计背景 百度的链接处理系统每天处理万亿级的超链数据,在过去,这是一系列Mapreduce的批量过程,对 ...

  8. php圖片中寫入字符串然後生成圖片下載到本地

    <?php /** * 生成卡片得類 * Enter description here ... * @author perry * @time 2014-03-03 10:02:20 */ cl ...

  9. ASP.NET MVC的Ajax.ActionLink 的HttpMethod="Get" 一个重复请求的BUG

    这段时间使用BootStrap+Asp.net Mvc5开发项目,Ajax.ActionLink遇到一个重复提交的BUG,代码如下: @model IList<WFModel.WF_Temp&g ...

  10. jq 判断输入数字

    jq 判断输入数字 <input   id="N_source" name="N_source"   type="text" valu ...