ajax 中的一些方法应用
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>get方式</title>
- <style>
- .loading{
- color: red;
- font-size: 16px;
- display: inline-block;
- margin-top: 10px;
- font-family: "微软雅黑";
- display: none;
- }
- </style>
- <script src="jquery-1.8.1.js"></script>
- <script>
- $(document).ready(function(){
- // GET请求
- // 第一种
- // $('#btn').click(function(){
- // //alert(1);
- // $.get('test.php?url=baidu1', function(response, status, xhr){
- // //$('#div1').html(response); // 请求返回的内容
- // console.log(status); // 请求的状态 success / error
- // $('#div1').html(xhr.responseText); // 请求返回的内容
- // });
- // 第二种
- // $('#btn').click(function(){
- // //alert(1);
- // // data 数据的等号两端没有空格
- // $.get('test.php', 'url=baidu', function(response, status, xhr){
- // $('#div1').html(response); // 请求返回的内容
- // });
- // });
- // 第三种
- // $('#btn').click(function(){
- // //alert(1);
- // // data 数据用json的形式
- // $.get('test.php', {url: 'baidu'}, function(response, status, xhr){
- // $('#div1').html(response); // 请求返回的内容
- // });
- // });
- // POST请求
- // POST 可以使用字符串形式的键值对传参, 自动转化为http消息实体传参
- // $('#btn').click(function(){
- // // data 数据用json的形式
- // $.post('test.php', 'url=baidu', function(response, status, xhr){
- // $('#div1').html(response); // 请求返回的内容
- // });
- // });
- // // 方法二
- // // post 可以使用对象键值对传参
- // $('#btn').click(function(){
- // // data 数据用json的形式
- // $.post('test.php', {url: 'baidu'}, function(response, status, xhr){
- // $('#div1').html(response); // 请求返回的内容
- // }, 'html');
- // });
- // 方法二
- // post 可以使用对象键值对传参
- // $('#btn').click(function(){
- // // data 数据用json的形式
- // // $(response)[0].url
- // $.post('test.json', function(data){
- // //$('#div1').html(response); // 请求返回的内容
- // var html = '', $dom = $('#div1');
- // //alert($(response)[0].url);
- // //alert(data[0].url);
- // $.each(data, function(k, v){
- // //alert(v['url']);
- // html = $('<p>'+"请求的地址是:"+v['url']+'</p>');
- // $dom.append(html);
- // });
- // });
- // });
- // // getJSON()
- // // 请求的只能是JSON格式的, 没有第四个参数 type
- // $('#btn').click(function(){
- // $.getJSON('test.json', function(data){
- // //$('#div1').html(response); // 请求返回的内容
- // var html = '', $dom = $('#div1');
- // $.each(data, function(k, v){
- // //alert(v['url']);
- // html = $('<p>'+"请求的地址是:"+v['url']+'</p>');
- // $dom.append(html);
- // });
- // });
- // });
- // getScript()
- // 异步加载js文件
- // $('#btn').click(function(){
- // $.getScript('test.js');
- // });
- // $.ajax(); 只传一个参数
- // 最底层的一个方法
- // $('#btn').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'test.php',
- // data: {url: 'baidu'},
- // success: function(response, status, xhr){
- // $('#div1').html(response);
- // }
- // });
- // });
- // ajax 表单序列化
- //
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'form.php',
- // data: {
- // user: $('input[name=user]').val(),
- // mail: $('input[name=mail]').val(),
- // },
- // success: function(response, status, xhr){
- // $('#div1').html(response);
- // }
- // });
- // });
- // 表单序列化
- // data: $('#form1').serialize()
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'form.php',
- // data: $('#form1').serialize(),
- // success: function(response, status, xhr){
- // $('#div1').html(response);
- // }
- // });
- // });
- // $('input[name=sex]').click(function(){
- // var value = $(this).serialize();
- // $('#div1').html(decodeURIComponent(value));
- // });
- // 还有一个可以返回JSON数据的方法
- // $('input[name=sex]').click(function(){
- // var value = $(this).serializeArray();
- // console.log(value);
- // $('#div1').html(value[0].name+'='+value[0].value );
- // //console.log(value);
- // //$('#div1').html(value);
- // //$('#div1').html(decodeURIComponent(value));
- // });
- // ajaxSetup(); 初始化重复属性
- // $('#btn1').click(function(){
- // $.ajax({
- // success: function(response, status, xhr){
- // //alert(response);
- // $('#div1').html(response);
- // }
- // })
- // });
- // $.ajaxSetup({
- // type: 'POST',
- // url: 'form.php',
- // data: $('#form1').serialize()
- // });
- // $.param(); 解对象键值对的
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'form.php',
- // data: $.param({
- // user: $('input[name=user]').val(),
- // mail: $('input[name=mail]').val(),
- // }),
- // success: function(response, status, xhr){
- // $('#div1').html(response);
- // }
- // });
- // });
- // $.ajaxStart() 请求开始时
- // $.ajaxStop() 请求结束时
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'form111.php',
- // data: $.param({
- // user: $('input[name=user]').val(),
- // mail: $('input[name=mail]').val(),
- // }),
- // success: function(response, status, xhr){
- // $('#div1').html(response);
- // },
- // //timeout: 200
- // //global: false
- // error: function(xhr, errorText, errorType){
- // alert(errorText+':'+errorType);
- // //$('#div1').html(errorType);
- // //alert(xhr.status +':'+ xhr.statusText); //error : not found
- // }
- // });
- // });
- // $(document).ajaxStart(function(){
- // $('.loading').show();
- // }).ajaxStop(function(){
- // $('.loading').hide();
- // });
- // post 请求错误的状态, 可以通过连缀.error()方法
- // $('#btn1').click(function(){
- // // data 数据用json的形式
- // $.post('test22.php', {url: 'baidu'}, function(response, status, xhr){
- // $('#div1').html(response); // 请求返回的内容
- // }).error(function(xhr, errorText, errorType){
- // //alert(errorText+':'+errorType);
- // //alert(xhr.status +':'+ xhr.statusText); //error : not found
- // });
- // });
- // $.ajax 加载json文件
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // // 如果请求的是json文件, 那默认的返回的类型就不用再写json了.
- // url: 'test.json',
- // // 如果是html格式的话, 那会把json文件的格式都给输出
- // //dataType: 'html',
- // dataType: 'json',
- // success: function(data){
- // //alert(data[0].url);
- // alert(data[0].url);
- // }
- // });
- // });
- // ajax 跨域处理
- // $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'jsonp.php',
- // dataType: 'json',
- // success: function(data){
- // //{"name":"json","age":24,"sex":"女"}
- // var html='', $dom = $('<table></table>'), $div = $('#div1');
- // $.each(data, function(){
- // //alert(data.name);
- // html = $('<tr><td>'+data.name+'</td><td>'+data.age+'</td><td>'+data.sex+'</td></tr>');
- // $div.append($dom.html(html));
- // });
- // }
- // });
- // });
- // ajax 跨域处理
- $('#btn1').click(function(){
- // $.ajax({
- // type: 'POST',
- // url: 'http://www.20160305.com:12000/jsonp.php',
- // dataType: 'json',
- // success: function(data){
- // alert(data.name);
- // }
- // });
- // $.getJSON('jsonp2.php?callback=?', function(data){
- // alert(data.name);
- // });
- //远程
- // $.getJSON('http://www.20160305.com:12000/jsonp2.php?callback=?', function(data){
- // alert(data.name);
- // });
- // ajax 获取远程数据
- // 第一种方法
- // $.ajax({
- // type: 'POST',
- // url: 'http://www.20160305.com:12000/jsonp2.php?callback=?',
- // dataType: 'json',
- // success: function(data){
- // alert(data.name);
- // }
- // });
- // 第二种方法
- $.ajax({
- type: 'POST',
- url: 'http://www.20160305.com:12000/jsonp2.php',
- dataType: 'jsonp',
- success: function(data){
- alert(data.name);
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <form action="" id="form1">
- 用户名: <input type="text" name="user" >
- 邮箱: <input type="text" name="mail" >
- <input id="btn1" type="button" value="点击提交">
- <input type="radio" name="sex" value="男">男
- <input type="radio" name="sex" value="女">女
- </form>
- <!-- <input id="btn" type="button" value="点击按钮"> -->
- <div id="div1">
- <span class="loading">正在努力加载中......</span>
- </div>
- </body>
- </html>
ajax 中的一些方法应用的更多相关文章
- ajax中的post方法中回调函数不执行的问题
前一段时间接触了JQuery Ajax中的.post()方法和.get()方法,感觉到ajax的简洁和强大,当用到.post()方法时,去W3上查找相关的使用方法,感觉十分简单,用法很明了,然后,直接 ...
- jQuery ajax中使用serialize()方法提交表单数据示例
<form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...
- jQuery中的Ajax几种请求方法
在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...
- 【转】Ajax中send方法参数的使用(get/post)
Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...
- Ajax中send方法的使用
Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...
- 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例
juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...
- Ajax中Delete请求参数 后台无法获取的解决方法(Restful风格)
方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- CI框架中,判断post,ajax,get请求的方法
CI框架当中并没有提供,类似tp框架中IS_POST,IS_AJAX,IS_GET的方法. 所有就得我们自己造轮子了.下面就介绍一下,如何定义这些判断请求的方法.其实很简单的. 首先打开constan ...
随机推荐
- C++模板特化
一 ."函数模板"与"模板函数" 下面几行代码就是一个"函数模板" template <class T> T abs(T x) ...
- unity3d模型制作规范
1. 单位,比例统一 在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. 2 ...
- 坑爹的对GBK编码的字符进行url编码
url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...
- python3.x随手笔记2
对象,价值观和类型 对象 Python的抽象的数据. 所有的数据在一个Python程序 表示对象或对象之间的关系. (在某种意义上,在 符合冯诺依曼模型的代码也“存储程序计算机” 由对象.) 每一个对 ...
- 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 ...
- NSInternalInconsistencyException: loaded the "XXXView" nib but the view outlet was not set
运行过程中App崩溃,报错如标题. 原因: viewController的view没有绑定xib的view. 解决方法: 在File's Owner中将view与viewController的view ...
- 百度Tera数据库介绍——类似cassandra,levelDB
转自:https://my.oschina.net/u/2982571/blog/775452 设计背景 百度的链接处理系统每天处理万亿级的超链数据,在过去,这是一系列Mapreduce的批量过程,对 ...
- php圖片中寫入字符串然後生成圖片下載到本地
<?php /** * 生成卡片得類 * Enter description here ... * @author perry * @time 2014-03-03 10:02:20 */ cl ...
- ASP.NET MVC的Ajax.ActionLink 的HttpMethod="Get" 一个重复请求的BUG
这段时间使用BootStrap+Asp.net Mvc5开发项目,Ajax.ActionLink遇到一个重复提交的BUG,代码如下: @model IList<WFModel.WF_Temp&g ...
- jq 判断输入数字
jq 判断输入数字 <input id="N_source" name="N_source" type="text" valu ...