PHP中ajax的局部刷新
发布网友
发布时间:2022-04-28 07:24
我来回答
共4个回答
懂视网
时间:2022-04-28 11:45
实现详解Ajax+php数据交互并且局部刷新页面:什么是Ajax?国内翻译常为阿贾克斯和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情
热心网友
时间:2022-04-28 08:53
我只说jquery的吧。
你的表单中添加分类和提交标题name和ID重复。
代码如下 copyleft by createindex
---------------------------华丽的分割线-----------------------------------
<form action="" method="post">
分类列表:<select name="select" id="select"></select>
分类名称:<input type="text" name="fenlei" id="fenlei" />
<input type="submit" id="button_add" value="添加分类">
标题:<input type="text" name="biaoti" id="biaoti" />
<input type="submit" id="button_title" value="提交标题" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
//添加分类绑定单击事件
$("#button_add").click(function(){
var fenlei = $("#fenlei").val();//取得表单的值
//Ajax post数据
$.ajax({
type: "POST",//Ajax请求为post
url: "some.php",//ajax请求URL 脚本地址
data: "fenlei="+fenlei, //传递的值
success: function(data){ //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
$("#select").html("").html(data);//将返回的列表插入分类.
//你只需要在后台脚本返回 <option value="xx">sdfsdf</option>之类的可以了。
}
});
});
});
</script>
---------------------------华丽的分割线-----------------------------------
<input type="submit" id="button_add" value="添加分类">
修改为
<input type="button" id="button_add" value="添加分类">
---------------------------华丽的分割线-----------------------------------
不知道你什么意思。 Jquery的选择器选择你要的DOM节点操作就可以了。怎么控制那是你自己怎么做的问题。像这种问题自己看文档就能写出来的。
热心网友
时间:2022-04-28 11:46
自己写HttpRequest或XMLHttp对象..其实很麻烦的..而且工作重复而枯燥...我建议你用一个js框架来完成...比如说prototype或jquery
首先你要准备个操作的ajax页面来完成添加程序的调用...然后添加程序后你需要返回所有的分类列表..假设这个页面名是add.php
<?php
// 要完成的是
// 完成insert操作
// 获取分类的数据
// 打印<select name="select" id="select">...</select>的数据
最好把原先需要刷新替换的内容用元素框起来..方便更新
<form action="" method="post">
<span id="select_box">
<select name="select" id="select">...</select>
</span>
<input type="text" id="type" name="type" />
<input type="button" value="添加分类" onclick="addtype();" />
<form>
完成一个js函数
<script type="text/javascript">
function addtype() {
// Ajax类你可以查询prototype的API..很好理解的
new Ajax.Update("select_box", "add.php", { method:"post", parameters:{type:$F("type")});
}
</script>
思路就是...你提交给add.php一个post...你从post中获取新添的分类..然后你重新组织<select>的部分代码打印出来...你js要完成的就是把重新组织后的html代码替换原来的~~这就是部分刷新
但实际上你可以不必这样....你只要完成的是添加分类就可以....然后只要告诉ajax的执行程序添加是否成功即可....没必要重新查询一次分类...如果成功..则直接给原本的select做new Option
热心网友
时间:2022-04-28 13:37
简单代码如下:
index.php
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript"
src="fun.js"></script>
<script type="text/javascript"
src="jquery-1.3.1.min.js"></script>
<body>
<div id="test1">用户
GM</div>
<div>你有未读消息(<span
id="count"
></span>)条</div>
</body>
</html>
fun.js
代码如下
function historyLotteryCode_1(){
$.ajax({
type:
'POST',
url : 'ajaxReturn.php',
data:
"userid=12",
success: function(data){
alert(data);
var partn =
/<script.*>.*<\/script>/;
if( data == 'empty' &&
partn.test(data) ){return;}
eval_r("data="+data);
document.getElementByIdx_x("count").innerHTML=data.count;
setTimeout(historyLotteryCode_1,5000);
}
});
}
setTimeout(historyLotteryCode_1,5000);
ajaxReturn.php
代码如下
<?php
$id=$_POST["userid"];
$info =
array('count'=>'1', 'user'=>'xiao',
'ai'=>$id);
$userinfo =
json_encode($info);
echo
$userinfo;
?>