0

我正在尝试将 ajax 添加到我的表单中，这样我就可以在不刷新的情况下提交表单，但是 php echo 命令不起作用。如果我取出 ajax，它可以正常工作，但会在提交时刷新。我认为这是一个试图让他们一起工作的案例。我现在只是在学习ajax，所以我对这一切都不太了解。请看看我哪里出错了

<script type="text/javascript"
 src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
    $(function() {
        $('form').bind('submit', function(){
            $.ajax({
                type: "POST",
                url: "ajax.html",
                data: $("form").serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>

<?php
    if(isset($_POST['submit'])){
          $a=$_POST['a'];
          $b=$_POST['b'];

           echo $a.$b;
       }
?>

<html>
 <form method='POST'>
    first name:<input type="text" name="a">
    last name: <input type="text" name="b">
               <input type='submit' name='submit'>
  </form>
</html>
4

4 回答 4

3

查看它，您正在向“ajax.html”发送一个 ajax 请求，并且在“ajax.html”中有您的 php 标签，您需要将其重命名为“ajax.php”以允许 php 标签工作。

于 2013-01-09T15:40:57.643 回答
2

您的成功函数只会触发包含静态文本的警报。

success: function() {
    alert("form was submitted");
}

如果您想查看响应数据，您必须对其进行处理。

success: function(data) {
    alert(data);
}
于 2013-01-09T15:42:27.593 回答
1
  1. 将 .html 更改为 .php 否则它将不会被 php 解释器解析。当然，除非您已将 apache 配置为解析 .html 文件。
  2. 您是否正在向上述页面发出 ajax 请求？您知道您将获得的不仅仅是 $a.$b 的回声，对吗？您也将收到返回的 html 部分。我建议创建另一个脚本并发布到该脚本，一个没有表单标签的脚本。
  3. 在您的 ajax 请求中，您需要console.log( data )或alert( data )
于 2013-01-09T15:48:12.383 回答
1

可能值得注意的是，您的 echo'd PHP 代码将不可见，因为 ajax 响应将获取该信息。这不是如何使用 ajax 的一个很好的例子，因为您没有显示 ajax 调用的结果。这样的事情会更有意义：

“ajax.php”PHP 文件：

<?php
    if(isset($_POST['submit']))
    {
       $a=$_POST['a'];
       $b=$_POST['b'];
       //Add user name to database here or something
       die($a." ".$b); //Prevents anything after this from being returned
    }
?>

<script type="text/javascript"
 src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
    $(function() {
        $('form').bind('submit', function(){
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: $("form").serialize(),
                success: function(data) {
                    alert("Hello " + data);
                }
            });
            return false;
        });
    });
</script>

<html>
 <form method='POST'>
    first name:<input type="text" name="a">
    last name: <input type="text" name="b">
               <input type='submit' name='submit'>
  </form>
</html>
于 2013-01-09T15:48:12.257 回答