您的位置：首页 > Web前端 > JQuery

用jquery +ajax 实现与php后台交互json数据

2015-01-14 10:38 971 查看

因为做了前段用jquery和ajax发送post或get请求到后端服务器，服务器我是用nginx ，你也可以用apache，

后端技术使用php，例子很简单，主要是理解了，扩展到复杂就没有什么问题。

代码给出，希望对大家有用：

这个是端html，你需要下载jquery :jquery下载

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "../js/jquery.js"></script>
<script type="text/javascript">
function city_change(){
var province_value =$("#province").val() ;		//获取选择的省份
var cityEle = $("#city");
//alert(province_value);
var aj = $.ajax( {
url:'/demo/test/c.php',// 跳转到 action 获取json数据的地址
data:{
province : province_value,

},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
//alert(data.data);
if(data.msg =="true" ){
// view("修改成功！");
//alert("修改成功！");
if(data.data!=null){
cityEle.empty();    //清除旧元素
var city_num= data.data.length;
//alert(data.data.length);
for(var i=0;i<city_num;i++){
var option = new Option(data.data[i].city);
cityEle.append(option);
}
//cityEle.append();
}
}else{
//view(data.msg);
}
},
error : function() {
// view("异常！");
alert("异常！");
}
});

}
</script>
</head>
<body>
<select id= "province" onchange="city_change()">
<option >广西</option>
<option>广东</option>
</select>
<select id = "city">

</select>
</body>
</html>

后端php代码：

<?php
$province = $_POST["province"];
if($province=='广西'){

$json = new stdclass();
$data = array();
for($i = 0;$i<5;$i++){
$obj = new stdclass();
$obj ->city="广西".$i."号";
$data[] = $obj;	//讲数据放到数组中
}
$json->data = $data;
$json->msg = "true";
echo json_encode($json);
}
if($province=='广东'){
$json = new stdclass();
$data = array();
for($i = 0;$i<5;$i++){
$obj = new stdclass();
$obj ->city="广东".$i."号";
$data[] = $obj;	//将数据放到数组中
}
$json->data = $data;
$json->msg = "true";
echo json_encode($json);
}

记录每一步脚步

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax php jquery json

相关文章推荐

新的分享

章节导航