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 ...
随机推荐
- 【转】 Linux下的多线程编程
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/原文链接:http://www.cnblogs.com/gnuhpc/archive/2012/12/07/280 ...
- selenium+python笔记3
#!/usr/bin/env python # -*- coding: utf-8 -*- """ @desc:学习unittest的用法 注意setUp/setUpCl ...
- Flask中mongodb实现flask_login保持登录
最近在学习Flask,使用flask-login时,一直无法完成保持登录的状态,网上的例子都是使用SQLAlchemy,但是我用的是mongodb. 网上的例子使用SQLAlchemy时,定义User ...
- JAVA 数组作业——动手动脑以及课后实验性问题
JAVA课后作业——动手动脑 一:阅读并运行示例PassArray.java,观察并分析程序输出的结果,小结,然后与下页幻灯片所讲的内容进行对照. 1.源代码 // PassArray.java // ...
- OID,主键生成策略，PO VO DTO,get和load区别，脏检查，快照，java对象的三种状态
主键生成策略 sequence 数据库端 native 数据库端 uuid 程序端 自动赋值 生成的是一个32位的16进制数 实体类需把ID改成String 类型 assigned 程序端 需手 ...
- 190. Reverse Bits -- 按位反转
Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...
- LayoutInflater和inflate()方法的用法
LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 实现LayoutInflater的实例化共有3种方法, (1).通过SystemService获得 Layou ...
- struts2视频学习笔记 07-08（为Action的属性注入值，指定需要Struts 2处理的请求后缀，常用常量）
课时7 为Action的属性注入值(增加灵活性,适用于经常更改的参数) Struts2为Action中的属性提供了依赖注入功能,在struts2的配置文件中,我们可以很方便地为Action中的属性注入 ...
- windows直接安装
- BZOJ1520 [POI2006]Szk-Schools
裸的费用流啊... 建图:对于一个点p拆成两个p1和p2,S向p1连边,流量为1,费用为0:p2向T连边流量为1,费用为0 然后i1向a2到b2分别连边,不妨设i1向p2连边,流量为1,费用为|i - ...