Question

任何人都可以帮助我理解为什么代码不起作用？

它不会将div中的文本更改为成员编写的文本。

对于我的英语提前抱歉，我的英语老师显然没有做好... = /

第一页：

<script>
function showUser()
{
var str = document.forms["myForm"]["users"].value;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","act2.php?q="+str,true);
xmlhttp.send();
}
</script>

<form name="myForm" onsubmit="return showUser()" method="post">
First name: <input type="text" name="users">
<input type="submit" value="Submit">
</form>

<div id="txtHint"><b>Person info will be listed here.</b></div>

第二页（act2.php）：（更正名称）

<?php
$q=$_GET["q"];

echo "$q";
?>

Answer 1

此行中指定的文件

xmlhttp.open("GET","act2.php?q="+str,true);

是 act2.php ，但根据您的帖子，您正在寻找 ajax2.php ，可能就是这样吗？

Answer 2

你只是忘了在showUser方法中“返回false”，表单将在Ajax调用之前照常发布

修改为了澄清，在onsubmit中你返回showUser（），showUser方法永远不会返回一个值，以阻止浏览器发布表单。另外，正如其他海报所暗示的那样，你暗示php文件名为ajax2.php，但代码实际上试图命中act2.php。

此外，建议使用某种框架（jQuery非常受欢迎）。

Answer 3

您的函数需要返回false以防止表单的默认操作，否则您的表单将被提交（是默认操作）。

只需在代码末尾添加return false即可。

function showUser(){

   // ...
   xmlhttp.send();

   // prevents the default action (the submit from your form)
   return false;

}

或：

<form name="myForm" onsubmit="showUser();return false;" method="post">

您也可以放心地删除IE5 / 6 compat代码。

if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

简单地变成：

  var xmlhttp=new XMLHttpRequest();

前面的var非常重要，否则xmlhttp将成为全局对象的成员而不是范围变量。

Answer 4

只是为了展示如何以更少的痛苦和jQuery来做同样的事情。

<form name="myForm" action="/act2.php">
    <input type="text" name="q">
    <input type="submit">
</form>

<div id="txtHint"></div>

<script type="text/javascript">
    $(document)
        // Link handler for submiting form
        .on('submit', 'form[name="myForm"]', function(e) {
            // Preventing original form submition
            e.preventDefault();

            // Send all data from form, to url from form's action attribute (/act2.php) and set received data to div with id txtHint
            $.get($(this).attr('action'), $(this).serialize(), function(data, status, xhr) {
                $('#txtHint').html(data);
            });
        });
</script>

为什么我的简单ajax代码不起作用？

4 个答案: