javascript - Ajax表单提交在另一个div中加载结果页面

Question

我正在尝试将数据从表单发送到另一个页面(在同一服务器上)，并将该页面加载到主索引页面上的 div 中。当我提交数据时，它正在被处理，但 div 没有更新以反射(reflect)新页面已加载到其中。

form-page.php

<script>
$(document).ready(function() {//start document ready
  $('#review-submit-button').click(function (e){
    e.preventDefault();

    $.ajax({
    type: 'POST',
    url: 'pages/firstdeploy/deploy-sequence-finalize1.php',
    data: $("#masteraccountsetup").serialize(),
    success: function(response){
$("#primary-display").html(response);
}

    });
  });
});//end document ready
</script>

处理表单页面.php

<?php
$con=mysqli_connect("localhost","***","***","***");
if (!$con){
    die("Database Connection Failed" . mysqli_error());
};


// escape variables for security
$companyname = mysqli_real_escape_string($con, $_POST['review-
companyname']);
$jobtitle = mysqli_real_escape_string($con, $_POST['review-jobtitle']);
$masteraccount = mysqli_real_escape_string($con, $_POST['review-username']);
$masteremail = mysqli_real_escape_string($con, $_POST['review-email']);
$masterpassword = mysqli_real_escape_string($con, $_POST['review-
masterpassword']);

$sql = "INSERT INTO accounts (username, password, company, position, email) 
VALUES ('$masteraccount','$masterpassword',
'$companyname','$jobtitle','$masteremail')";

mysqli_query($con,$sql);

echo $companyname;
echo "<br>";
echo $masteraccount;
echo "<br>";
echo $jobtitle;
echo "<br>";
echo $masteremail;
echo "<br> test";
echo $masterpassword;



$con->close();

？>

现在，当我独立访问处理页面时，它可以工作，并且通过表单页面提交时，它也可以工作。问题是，它没有从索引页更新到#primary-display。 form-page.php 被加载到表单序列开头的 #primary-display div 中。

编辑:添加索引页

<div id="primary-holder" class="prima-hold">
<div id="primary-display">
<?php 

// Start the Session
session_start();


 $con=mysqli_connect();
 if (!$con){
    die("Database Connection Failed" . mysqli_error());
 };


  $query = "SELECT * FROM accounts";
  $result = mysqli_query($con,$query) or die(mysqli_error());
  $count = mysqli_num_rows($result);    

  if($count > 0){

   //Display if there is already a restaurant placed in the system
 echo "



  <script>

  $(\"#primary-display\").load(\"pages/security/mainentrance.php\");      

  </script>

  ";
  }else{
   // Display if no restaurants have been placed in the system

  echo "



  <script>

  $(\"#primary-display\").load(\"pages/firstdeploy/intro.php\");      

  </script>

   ";

   };

    ?>

    </div>

   </div>

Answer 1

你可以尝试:

$.ajax({
    type: 'POST',
    url: 'pages/firstdeploy/deploy-sequence-finalize1.php',
    data: $("#masteraccountsetup").serialize(),
    dataType: 'html',
    success: function(response){
        $("#primary-display").html(response);
    }

如果ajax dataType设置为text或html，则不会进行预处理。数据只是传递到成功处理程序，并通过 jqXHR 对象的 responseText 属性提供。

来自here