19、jQuery中Ajax基本网络请求使用示例
1、index.html<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax</title>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
*{
margin: 10px auto;
padding: 0;
text-align: center;
font-size: 18px;
}
#submit{
display: block;
width: 60px;
margin: 20px auto;
}
</style>
<script>
$(document).ready(function(){
$(':submit').click(function(event){
var str = $('form').serialize();
// return false实际执行
// 1、event.preventDefaule()
// 2、event.stopPropagation()
// 3、终止函数执行并返回
event.preventDefault();
/*
// 提交地址、提交数据、回调函数、获取类型
$.get('submit.php', str, function(data){
var objArray = data;
console.log(data.title);
}, 'json');
$.post('submit.php', str, function(data){
var objArray = data;
console.log(data.title);
}, 'json');
*/
$.ajax({
url:"submit.php", type:"post", data:str, dataType:"text",
beforeSend:function(XMLHttpRequest){
console.log('beforeSend:'+XMLHttpRequest);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log('error:'+XMLHttpRequest+textStatus+errorThrown);
},
success:function(data, textStatus){
console.log('success:'+data);
},
complete:function(XMLHttpRequest, textStatus){
console.log('complete:'+XMLHttpRequest+textStatus);
}
});
});
});
</script>
</head>
<body>
<form action="submit.php" method="POST">
<span>品牌：</span>
<input id="apple" type="checkbox" name="brand[]" value="apple" />Apple
<input id="samsung" type="checkbox" name="brand[]" value="samsung" />Samsung
<input id="google" type="checkbox" name="brand[]" value="google" />Google
<input id="submit" type="submit" value="提交" />
</form>
</body>
</html>2、submit.php<?php
header("Content-Type:text/html;charset=utf-8");
$appleArray = array(
array(
'title'=>'iPhone 4S',
'brand'=>'苹果',
'price'=>'1488',
'location'=>'中国大陆'),
array(
'title'=>'iPhone 5',
'brand'=>'苹果',
'price'=>'2488',
'location'=>'中国大陆')
);
$samsungArray = array(
array(
'title'=>'Galaxy S3',
'brand'=>'三星',
'price'=>'1488',
'location'=>'韩国'),
array(
'title'=>'Galaxy Note II',
'brand'=>'三星',
'price'=>'3488',
'location'=>'韩国')
);
$googleArray = array(
array(
'title'=>'Nexus',
'brand'=>'谷歌',
'price'=>'2500',
'location'=>'韩国')
);
// 获取用户选项，如果没有选项提示重新选择
$global = array_merge($_GET, $_POST); // 兼容GET与POST方法
$brandChecked = isset($global['brand'])?$global['brand']:exit('请选择选项');
// 遍历数组拼接集合
foreach($brandChecked as $item){
$realBrand[] = ${$item.'Array'};
}
// 根据用户选项合并相应数据
$newArray = call_user_func_array('array_merge', $realBrand);
echo json_encode($newArray);
页:
[1]