【www.bbyears.com--网页配色】
先来普通一下query ajax参数
data 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
示例：
代码如下$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
这里data后面跟的参数可以用二种表式：一种是普通url传参的写法一样，还有一种就是写在json数组里，
上面示例data部分也可以这样写：data: {name:"John",location:"Boston"}。这二个用法有什么区别？
今天在开发中发现二者用法的细微差别。第一种我们用url传参，参数里面如果加带"&"这个符号的话，可能参数接收不到或不完整，如“ data: "name=John&location=Boston",”，
如果name的值是"john&smith"这样写可能就会有问题，我们可以用JS里面的encodeURIComponent()方法进行转义，
但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义，如果转义的话，接收的将是转义后的字符串
首先上一个请求php获得下拉列表的方法：
代码如下//通过ajax获取下拉框数据
function getCategory(){
$cate_id=isset($_POST["cate_id"])?trim($_POST["cate_id"]):"";
if(!$cate_id){
echo "ajax获取数据失败";
}else{
$_gcategory_mod=&m("gcategory");
$category=$_gcategory_mod->find(
array(
"fields"=>"cate_id,
cate_name,parent_id",
"conditions"=>"parent_id=".$cate_id
));
echo json_encode($category);
}
}
根据选择的下拉框或者文本框进行查询，返回结果：
代码如下//ajax查询
function c_search(){
$cate1=isset($_POST["cate1"])?intval($_POST["cate1"]):0;
$cate2=isset($_POST["cate2"])?intval($_POST["cate2"]):0;
$cate3=isset($_POST["cate3"])?intval($_POST["cate3"]):0;
$good_name=isset($_POST["good_name"])?trim($_POST["good_name"]):0;
//echo $good_name;exit;
$page = $this->_get_page ();
if($cate1!=0){
$condition="cate_id_1=".$cate1;
if($cate2!=0){
$condition.=" and cate_id_2=".$cate2;
}
if($cate3!=0){
$condition.=" and cate_id_3=".$cate3;
}
}
if(($good_name!="请输入商品名称")){
$condition="goods_name like "%".$good_name."%"";
}
$condition.=" and if_show=1";
//print_r($condition);exit;
$_gcategory_mod=&m("gcategory");
$cate1=$_gcategory_mod->find(array("fields"=>"cate_id,cate_name,parent_id","conditions"=>"parent_id=0"));
$this->assign("cate1",$cate1);
//print_r($condition);exit;
$list = $this->_goods_mod->find ( array (
"fields" => "*",
"conditions" =>$condition,
"order" => "goods_id desc",
"count" => true,
"limit" => $page ["limit"]
) );
//print_r($list);exit;
$page ["item_count"] = $this->_goods_mod->getCount ();
$this->_format_page ( $page );
$this->assign ( "page_info", $page );
// print_r($page);exit;
$this->assign ( "list", $list );
$this->display ( "dapei.new.html" );
}
}
输出json格式。
代码如下<script type="text/javascript">
$(function(){
$("#cate1").change(function(){
//alert("32");
cate1_id=$(this).val();
$.ajax({
url:"../admin/index.php?app=dapei&act=getCategory",
type:"post",
dataType:"json",
data:{cate_id:cate1_id},
success:function(data){
$("#cate2").empty();
$("")
.appendTo("#cate2");
$.each(data,function(i,item){
$("")
.val(item.cate_id)
.text(item.cate_name)
.appendTo("#cate2");
});
}
});
});
$("#cate2").change(function(){
cate1_id=$(this).val();
$.ajax({
url:"../admin/index.php?app=dapei&act=getCategory",
type:"post",
dataType:"json",
data:{cate_id:cate1_id},
success:function(data){
$("#cate3").empty();
$("")
.appendTo("#cate3");
$.each(data,function(i,item){
$("")
.val(item.cate_id)
.text(item.cate_name)
.appendTo("#cate3");
});
}
});
});
$("#c_search").click(function(){
$.ajax({
url:"../admin/index.php?app=dapei&act=c_search",
type:"post",
dataType:"html",
data:{
cate1:$("#cate1").val(),
cate2:$("#cate2").val(),
cate3:$("#cate3").val()
},
dataType:"html",
success:function(data){
//alert(data);
$("#dapei_fenye").empty().append($(data).find("#dapei_fenye").html());
}
});
});
$("#name_search").click(function(){
//alert("fsad");
$.ajax({
url:"../admin/index.php?app=dapei&act=c_search",
type:"post",
dataType:"html",
data:{
good_name:$("#good_name").val()
},
dataType:"html",
success:function(data){
//alert(data);
$("#dapei_fenye").empty().append($(data).find("#dapei_fenye").html());
}
});
});
})
</script>
对于ajax 还有很多的参数下面给一个表大家参考一下。
参数名
类型
描述
url
String
(默认: 当前页地址) 发送请求的地址。
type
String
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 Delete 也可以使用，但仅部分浏览器支持。
timeout
Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async
Boolean
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend
Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache
Boolean
(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete
Function
请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType
String
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data
Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
dataType
String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error
Function
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}
global
Boolean
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData
Boolean
(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success
Function
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}