Javascript jquery没有刷新div

时间:2013-11-03 06:11:07

标签: javascript php jquery html

我有这个代码 HTML

<form id="myForm" method="post" onsubmit="return updateValues(this)">
    <input id="id" type="hidden" value="<?php echo $row[0]; ?>" />
    <input type="text" id="dd" value="<?php echo $row[1];?>" />
    <input type="text" id="da" value="<?php echo $row[2];?>" />       
    <input type="text" id="db" value="<?php echo $row[3];?>" />
    <input type="submit" id="submit" value="Save Changes" />
</form>

<div id="successNote"></div>

并使用javascript将值传递给php文件以执行更新。

function updateValues(thisForm)
{
   if (thisForm == "")
   {
      document.getElementById("successNote").innerHTML = "please fill form.";
      return;
   } 
   var id = document.getElementById('id').value;
   var dd = document.getElementById('dd').value;
   var da = document.getElementById('da').value;
   var db = document.getElementById('db').value;
   var str = 'id='+id+'&dd='+dd+'&da='+da+'&db='+db;

   if (window.XMLHttpRequest)
   {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
   }
   else
   {
       // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("successNote").innerHTML = "Form has been updated";
        alert('Form has been updated successfully!');
      }
    }   
   xmlhttp.open("GET","update_myForm.php?"+str,true);
   xmlhttp.send();
}

我的javascript代码将值传递给php文件(PHP正在更新这些值),但是,当它返回到html页面时,它会显示警报,当按下确定时它会刷新整个页面。我希望它只刷新div而不是整个页面。 我不知道我做错了什么,任何建议都会被欣赏。

2 个答案:

答案 0 :(得分:1)

您错过了函数中的return false

function updateValues(thisForm)
{
   // your code...
   xmlhttp.send();
   return false;
}

答案 1 :(得分:1)

你能试试吗,

        <form id="myForm" method="post" onsubmit="return updateValues(this)">
            <input id="id" type="hidden" value="<?php echo $row[0]; ?>" />
            <input type="text" id="dd" value="<?php echo $row[1];?>" />
            <input type="text" id="da" value="<?php echo $row[2];?>" />       
            <input type="text" id="db" value="<?php echo $row[3];?>" />
            <input type="submit" id="submit" value="Save Changes" />
        </form>

        <div id="successNote"></div>

        <script>

        function updateValues(thisForm)
        {

           if (thisForm == "")
           {
              document.getElementById("successNote").innerHTML = "please fill form.";
              return false;
           } 
           var id = document.getElementById('id').value;
           var dd = document.getElementById('dd').value;
           var da = document.getElementById('da').value;
           var db = document.getElementById('db').value;
           var str = 'id='+id+'&dd='+dd+'&da='+da+'&db='+db;

           if (window.XMLHttpRequest)
           {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
           }
           else
           {
               // code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
           xmlhttp.onreadystatechange=function()
           {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
                document.getElementById("successNote").innerHTML = "Form has been updated";
                alert('Form has been updated successfully!');
              }
            }   
           xmlhttp.open("GET","update_myForm.php?"+str,true);
           xmlhttp.send();

           return false;
        }


        </script>