<!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>