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 ...
随机推荐
- JSF框架认识
JSF框架 编辑 JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架(是Java Community Process 规定的JSR-127标准).它提供了 ...
- Android EditText 获得输入焦点 以及requestfocus()失效的问题
最近做公司项目的时候,经常会遇到一个问题,就是我为某个控件如EditText设置requestfocus()的时候不管用,比如说登陆的时候,我判断下用户输入的密码,如果正确就登陆,错误就提示密码错误, ...
- java.lang.ClassNotFoundException: org.apache.http.util.Args
java.lang.ClassNotFoundException: org.apache.http.util.Args at org.apache.catalina.loader.WebappClas ...
- AppSettings和ConnectionStrings的区别
AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...
- javascript function new this
1. 首先,我们这里把function直接调用时将这个function当做方法来看待,而new function是将function当做类来看待 2. 当把function作为类来使用时,functi ...
- 用Google Analytics跟踪JavaScript Errors （译）
通过custom events来实施 // Track basic JavaScript errors window.addEventListener('error', function(e) { _ ...
- 上国际网络——通过配置host
http://laod.cn/hosts/2016-google-hosts.html
- CentOS 下的MySQL配置
先贴出代码(/etc/my.cnf)如下: #The following options will be passed to all MySQL clients [client] #password ...
- js在mootools框架下的new Class
首先,在HTML文件中引入mootools.js. mootools-more.js.mootools-core.js,然后就能使用mootools封装的一些特性. 几乎类似于面向对象. mootoo ...
- 在 Linux 中怎样将 MySQL 迁移到 MariaDB 上
自从甲骨文收购 MySQL 后,由于甲骨文对 MySQL 的开发和维护更多倾向于闭门的立场,很多 MySQL 的开发者和用户放弃了 MySQL.在社区驱动下,促使更多人移到 MySQL 的另一个叫 M ...