请教一下PHP+AJAX的问题

Question

我做了个添加记录到数据库的程序，想用上AJAX实现无刷新的效果，请问如何实现？我的代码如下：表单页page.php:
<form id="form1" name="form1" method="post" action="add.php">
  <input name="username" type="text" id="username" />
  <input type="submit" name="Submit" value="添加" />
</form>php程序页add.php
<?php 
$varname=$_POST["username"];
require("conn.php");
mysql_query("insert into mybiao(username) values('$varname')");
echo "<script>alert('添加成功')</script>";?>
想在两个页之间用AJAX传值，如何实现？新手，请指教，非常感谢！

Answer 1

给你看个例子呵呵
创建XMLHTTPRequest对象:Ajax
<script language="JavaScript" type="text/javascript" src="Ajax.js"></script>
var Ajax=getXMLHTTPRequest();
服务器请求:getServerTime()
function getServerTime(){
    var url='Ajax.php';
    var Rand=parseInt(Math.random()*999);
    url=url+"?rand="+Rand;
    Ajax.open("GET",url,true);
    Ajax.onreadystatechange=useHttpResponse;
    Ajax.send(null);
}
回调函数:useHttpResponse()
function useHttpResponse(){
    if(Ajax.readyState==4){
         if(Ajax.status==200){
              var timeValue=Ajax.responseXML.getElementsByTagName("timenow")[0];
              document.getElementById('showtime').innerHTML=timeValue.childNodes[0].nodeValue;
         }
         else{
             document.getElementById('showtime').innerHTML='响应中';
         }
    }
    else{
         document.getElementById('showtime').innerHTML='请求中';
    }
}
function getXMLHTTPRequest(){
    var request=false;
    try{
    // Firefox, Opera 8.0+, Safari
        request=new XMLHttpRequest();
    }
    catch(e){
    // Internet Explorer
        try{
            request=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                request=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                request=false;
            }
        }
    }
    return request;
}
呵呵 我自己整理的 你拿去看看 研究研究

Answer 2

function InitAjax() 
{
--代码省略} 
function addshow(suppid)
{
  var username=form1.username.value;
  var postStr = "username="+ username;
　var url = "add.php";
　//实例化Ajax对象
　var ajax = InitAjax();
　//使用POST方式进行请求
　ajax.open("POST", url, true); 
  //定义传输的文件HTTP头信息
　ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
　//发送POST数据
　ajax.send(postStr);
　//获取执行状态
　ajax.onreadystatechange = function() { 
　　//如果执行是状态正常，那么就把返回的内容赋值给上面指定的层
　　if (ajax.readyState == 4 && ajax.status == 200) { 
        alert("添加成功！～");
　}
　}
}<form id="form1" name="form1" method="post" action="#"> 
......
<input type="submit" name="Submit" value="添加"  onclick="addshow()"/> 

Answer 3

你的page加入他们上面说的那些js代码就行了啊。另外无刷新的话你的form就不要设action了吧，在js代码里的open函数中指定url就是了。
具体来说，你的page.html大体上写成以下应该就可以了吧呃，我也菜鸟……也是刚开始学：
<script type="text/javascript">function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }

    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
          alert("调用add.php成功");
        }
      }
    xmlHttp.open("POST","add.php",true);
    xmlHttp.send(null);

 }
</script><form id="form1" name="form1"> 
  <input name="username" type="text" id="username" /> 
  <input type="submit" name="Submit" value="添加" onclick="ajaxFunction()"/> 
</form>

Answer 4

测试例<form id="form1" name="form1" method="post" action="ajax_server.php"> 
  <input name="username" type="text" id="username" value='abc'/> 
  <input type="submit" name="Submit" value="添加" /> 
</form> <!--jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.com/jquery/form/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    var url = 'ajax_server.php';
    //ajax的post提交
    $.post(url,
        { data: $("#form1").formSerialize()},
        function(data){
            alert(data);            //debug:data即为处理结果
        });                       
 
}); 
</script>  说明：
1、提交动作没有绑定到事件，原因是测试方便
2、ajax_server.php 只是简单的 print_r($_POST);

Answer 5

楼主还少了一段初始化AJAX的javascript，代码网上搜一下，名称是InitAjax。这是比较原始的方式，可以用js框架jquery来简化ajax请求，8楼有列子

Answer 6

ajax是通过javascript来实现的，单纯html实现不了。