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 ...
随机推荐
- <转> jsp页面向action传值的方法（最后一种简单）
多的不说,直接上代码; struts.xml代码: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
- iOS高性能图片架构与设计
版权声明:本文由柯灵杰原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/157 来源:腾云阁 https://www.qclo ...
- as3中的多线程
从fp11.4开始支持worker技术, 即as3中的线程概念, 到了fp11.5, flascc中开始支持pthread家族来创建线程. 总的来说, as3中有两种创建线程的方法: 1.直接在as3 ...
- 《基于MVC的Javascript》
var Class = function(){ var klass = function(){ this.init.apply(this,arguments); } klass.prototype.i ...
- Android 反编译工具简介
Android 反编译工具: 所需工具:1 apktool : 用于获取资源文件 2 dex2Jar : 用于将classes.dex转化成jar文件 2 jd-gui: 将jar文件转化成java文 ...
- iOS 开发 – 均衡代码职责
前言 文章的标题有点绕口,不过想了半天,想不到更好的标题了.本文的诞生有一部分功劳要归于iOS应用现状分析,标题也是来源于原文中的"能把代码职责均衡的划分到不同的功能类里".如果你 ...
- OC 实例变量（Instance Var）和成员变量（member var）区别
摘要: Objective-C 引入了“实例变量"的概念,但同时, 也经常出现 “成员变量”的声音. 到底什么是实例变量,什么是成员变量,二者的区别是什么呢? 今天查看apple 的官方 ...
- Java多线程-新特性-线程池
Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线程相关的内容,为多线程的编程带来了极大便利.为了编写高效稳定可靠的多线程程序 ...
- [转]Perfmon - Windows 自带系统监测工具
以下内容转自:http://blog.csdn.net/oscar999/article/details/7918385 ---------------------------分割线--------- ...