我和我的AJAX调用的一个问题。我提交通过PHP MySQL的一些信息，在提交的部分作品完美，它的添加数据到数据库中，但AJAX功能没有加载在PHP的背景下，它的加载窗口并显示PHP文件结果。

下面是HTML code。

 ＆LT;形式的行动=upload.php的类=的addItem方法=邮报＆GT;
      姓：＆LT; BR＆GT;＆LT;输入类型=文本级=名字NAME =名字/＆GT;＆LT; BR＆GT;
      名字：＆LT; BR＆GT;＆LT;输入类型=文本级=姓氏NAME =姓氏/＆GT;＆LT; BR＆GT;
      年龄：其中; BR＆GT;＆LT;输入类型=文本级=时代NAME =年龄/＆GT;＆LT; BR＆GT;
      图文：＆LT; BR＆GT;＆LT;输入类型=文件名称=形象接受=为image / jpeg/＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
      ＆LT;输入类型=提交级=submitItemVALUE =添加行/＆GT;
  ＆LT; /形式GT;
  ＆所述; A HREF =logout.php＆GT;注销＆所述; / a取代;
  ＆LT; / DIV＆GT;

  ＆LT;脚本＆GT;
  $（文件）。就绪（函数（）{
    $（submitItem）点​​击（函数（）{
    //开始AJAX发送
      jQuery.ajax（{
        //输入完整的路径下，以你的发送PHP文件
        网址：upload.php的，
        键入：POST，
        数据：数据，
        缓存：假的，
        成功：函数（HTML）{
          //如果表单提交成功
          如果（HTML代码== 1）{
            $（'。successMessage）显示（200）;
            $（'。successMessage'）延迟（2000）.hide（）。
          }
          //仔细检查，如果数学的问题是正确的
          其他 {
            $（'的errorMessage）显示（200）;
            $（'。的errorMessage'）延迟（2000）.hide（）。
          }
        }
      }）;
      }）;
    }）;

  ＆LT; / SCRIPT＆GT;
 

下面是PHP的code

 ＆LT; PHP

$名称= $ _ POST ['姓'];
$姓= $ _ POST ['姓氏'];
$年龄= $ _ POST ['年龄'];

如果（（$名===）||（$姓===）||（$岁===））{
    回声请填写在各个领域;
} 其他 {
    $ CON =的mysql_connect（localhost，则用户，密码）;
    如果（！$ CON）
      {
      死亡（无法连接：mysql_error（））;
      }

    mysql_select_db（MY_DB，$ CON）;

    $ SQL =INSERT INTO人（名字，姓氏，年龄）
    VALUES
    （'$ _ POST [名字]，$ _ POST [姓氏]'，'$ _ POST [年龄]'）;

    如果（！的mysql_query（$的SQL，$ CON））
      {
      死亡（错误：mysql_error（））;
      }

    如果（$ SQL）{回声1; }
    其他{回声错误;}
    }

    则mysql_close（$ CON）;

？＆GT;
 

解决方案

您处理程序需要返回false; 指示浏览器还没有做定期提交的行动

（另外，你真的应该考虑使用提交形式的活动，而不是在点击事件的按钮。）

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
  $（form.addItem）。递交（函数（）{
    //开始AJAX发送
    jQuery.ajax（{
      // ...您的参数...
    }）;
    返回false;
  }）;
}）;
＆LT; / SCRIPT＆GT;
 

I'm having a problem with my ajax call. I'm submitting some info via php to mySQL, the submission part works perfectly, it's adding the data to the database, but the ajax function isn't loading that php in the background, it's loading it in the window and showing the php file results.

Here's the HTML code.

<form action="upload.php" class="addItem" method="post">
      Firstname:<br><input type="text" class="firstname" name="firstname" /><br>
      Lastname:<br><input type="text" class="lastname" name="lastname" /><br>
      Age:<br><input type="text" class="age" name="age" /><br>
      Photo:<br><input type="file" name="image" accept="image/jpeg" /><br><br>
      <input type="submit" class="submitItem" value="Add Row" />
  </form>
  <a href="logout.php">Logout</a>
  </div>

  <script>
  $(document).ready(function(){
    $(".submitItem").click(function(){
    // Start AJAX send
      jQuery.ajax({
        // Enter below the full path to your "send" php file
        url: "upload.php",
        type: "POST",   
        data: data,
        cache: false,
        success: function (html) {
          // If form submission is successful
          if ( html == 1 ) {
            $('.successMessage').show(200);
            $('.successMessage').delay(2000).hide();
          }
          // Double check if maths question is correct
          else {
            $('.errorMessage').show(200);
            $('.errorMessage').delay(2000).hide();
          }
        }
      });
      });
    });

  </script>

Here's the PHP code

<?php

$name = $_POST['firstname'];
$surname = $_POST['lastname'];
$age = $_POST['age'];

if(($name === "") || ($surname === "") || ($age === "")){
    echo "please fill in all fields";
} else {
    $con = mysql_connect("localhost","user","password");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }

    mysql_select_db("my_db", $con);

    $sql="INSERT INTO Persons (FirstName, LastName, Age)
    VALUES
    ('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

    if (!mysql_query($sql,$con))
      {
      die('Error: ' . mysql_error());
      }

    if ($sql) { echo "1"; }
    else{echo "error";}
    }

    mysql_close($con);

?>

Your handler needs to return false; to instruct the browser not to do its regular submission action.

(Also, you should really consider using the submit event of the form, rather than the click event of the button.)

<script type="text/javascript">
$(function(){
  $("form.addItem").submit(function(){
    // Start AJAX send
    jQuery.ajax({
      // ... your parameters ...
    });
    return false;     
  });
});
</script>