Question

PHP中ajax的局部刷新

找了半天资料跟实例也没整明白.
代码如下(比较简略):
<form action="" method="post">
分类列表:<select name="select" id="select"></select>
分类名称:<input type="text" name="fenlei" id="fenlei" />
<input type="submit" name="button" id="button" value="添加分类" onClick="form1.action='#';form1.submit()">

标题:<input type="text" name="biaoti" id="biaoti" />
<input type="submit" name="button" id="button" value="提交标题" />
</form>

我想要的功能是输入[分类名称]点[添加分类]
添加到数据库后,只局部刷新分类列表这行(列表读取分类数据).

帮忙写出这功能的ajax代码
如果能解释代码的含义另追加高分.
jquery的方法偶试出来啦.那么剩下个疑问...
就是怎么控制它的刷新域.就像1楼朋友那样用<span>控制刷新域.
`````````````````````````````````````````````````````````````````````````
我看了手册,有几处不明白
1.data 假如我要提交多个元素呢?比如多个文本框.怎么写?
data: "name=John&location=Boston",看到示例一段有这...是什么意思?
我想明白另个页面我将如何接收它?
2.function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}
textStatus是什么参数?
this只能是一行吗?

$("#select").html("").html(data);
$("#t").css("display")="none";
我这样写出错了...请问是怎么改?
功能意思就是<div id="t" style="display:"><form></form></div>他的display=none

Answer 1

我只说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节点操作就可以了。怎么控制那是你自己怎么做的问题。像这种问题自己看文档就能写出来的。

Answer 2

我只说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节点操作就可以了。怎么控制那是你自己怎么做的问题。像这种问题自己看文档就能写出来的。

Answer 3

自己写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

Answer 4

简单代码如下：
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;
?>