Question

之前一直在使用Ajax处理表单并且曾经在没有附加功能（css等）的版本上工作。它工作得很好，数据已成功插入数据库，我已经能够显示和隐藏两个div。现在我曾经把它应用到我一直在做的表格上。它的行为与以前的版本不同，所以它完全相同（确定，更改了一些名称，添加了一些输入），就像PHP文件中没有“成功消息”一样，突然所有数据都显示在URL中，当前表单没有t隐藏并显示下一个。

我无法理解行为的突然变化，看了一下错误，比较了代码，但不知道。这似乎是一个小错误，我没有发现它或整个建筑有什么问题。

当前文件是：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?
require 'config.php';
session_start();

// Check if user is logged in using the session variable
if ( $_SESSION['logged_in'] != 1 ) {
  $_SESSION['message'] = "You must log in before viewing your profile page!";
  header("location: error.php");    
}
else {
    // Makes it easier to read

    $id = $_SESSION['id'];
    $name = $_SESSION['name'];
    $email = $_SESSION['email'];
    $active = $_SESSION['active'];
    $hash = $_SESSION['hash'];
}


?>


<script type="text/javascript">
function getState(val) {
  $.ajax({
  type: "POST",
  url: "demo_ajax.php",
  data:'country_id='+val,
  success: function(data){
    $("#region").html(data);
  }
  });
}

$(document).ready(function(){
  $("#submit").click(function(){

    var size=$("#size").val();
    var industry=$("#industry").val();
    var country=$("#country").val();
    var region=$("#region").val();
    var url=$("#website").val();    
    var fb=$("#fb").val();
    var lkdn=$("#lkdn").val(); 

    $.ajax({
      type:"post",
      url:"process2.php",
      data:"size="+size+"&industry="+industry+"&country="+country+"&region="+region+"&url="+url+"&fb="+fb+"&lkdn="+lkdn,
      success:function(data){
       $("#theform").hide();  
       $("#info").html(data);   
       //$("#partone").css();     
       $("#partone").show();

       alert("Hello");
     }
   });
  });
});




</script>  
  <?php include 'js/js.html'; ?>
  <?php include 'css/css.html'; ?>

</head>

<body class="w3-blue r_login_corp_body">
<div id="info" style="color:white"></div>
<div class="r_login_corp_body"></div>

<div class="w3-content w3-white r_siu r_centered_div">
        <header class="w3-camo-black w3-container">
            <div class="w3-container ">
                <span class="w3-xlarge r_caption">eRecruiter</span>         <span class="large">Corporate Login</span>
            </div>

            <div class="w3-black">
                <a href="javascript:void(0)" onclick="selectForm('register');">
                  <div class="w3-half tablink w3-hover-text-yellow w3-padding w3-center w3-padding-16">Register</div>
                </a>
            </div>              
        </header>   

  <!--  Register -->
  <div id="register" role="form" class="r_form_elements">
        <form  name="formone"  class="form"  autocomplete="off">
          <div id="profed" class="w3-container w3-padding-16">
              <div class="alert alert-error"></div>

              <label>Company Industry</label>
                <input class="w3-input" name="industry" id="industry" type="text" placeholder="Your Industry" >

              <label>Company Size</label>
                <input class="w3-input" name="size" id="size" type="integer" placeholder="Your Company Size" >

              <label >Country:</label>
                <select name="country" id="country" class="demoInputBox" onChange="getState(this.value);" >
                  <option value="">Select Country</option>
                    <?php       
                      $sql1="SELECT * FROM pentagonal_country";
                          $results=$mysqli->query($sql1); 
                      while($rs=$results->fetch_assoc()) { 
                      ?>
                      <option value="<?php echo $rs["country_code"]; ?>"><?php echo $rs["country_name"]; ?></option>
                      <?php
                      }
                    ?>
                </select>

              <label>State:</label>
                <select id="region" name="region" onKeyup="checkform()">
                <option value="">Select State</option>
                </select>

              <label>Website</label>
                <input class="w3-input" name="website" id="website" type="url" placeholder="Your Website-Address" >

              <label>Facebook</label>
                <input class="w3-input" name="fb" id="fb" type="url" placeholder="https://facebook.com/" >

              <label>Linkedin</label>
                <input class="w3-input" name="lkdn" id="lkdn" type="url" placeholder="https://linkedin.com/in/">                                      
          </div>
      <div class="w3-row">
        <button type="submit" id="submit" class="w3-button w3-black w3-half w3-hover-yellow" >Add</button>
        <button class="w3-button w3-black w3-half w3-hover-pale-yellow">Forgot Password</button>

      </div>
    </form>
  </div>
  <!--  Register -->
  <div id="partone" style="display:none">
        <form>
               name : <input type="text" name="name" id="name">
               </br>
               message : <input type="text" name="message" id="message">
               </br>

               </br>
               name : <input type="text" name="url" id="url">
               </br>
               message : <input type="text" name="fb" id="fb">
               </br>
               name : <input type="text" name="lkdn" id="lkdn">
               </br>

               </br>                                             </br>
               Send;

        </form>      
</div>
</div> 


</body>
</html>

和插入数据的PHP文件是：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "remotejobs";

session_start();

// Check if user is logged in using the session variable
if ( $_SESSION['logged_in'] != 1 ) {
  $_SESSION['message'] = "You must log in before viewing your profile page!";
  header("location: error.php");    
}
else {
    // Makes it easier to read

    $id = $_SESSION['id'];
    $name = $_SESSION['name'];
    $email = $_SESSION['email'];
    $active = $_SESSION['active'];
    $hash = $_SESSION['hash'];
}

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

  $industry=$_POST["industry"];
  $size=$_POST["size"];
  $country=$_POST["country"];
  $region=$_POST["region"];      
  $website=$_POST["url"];
  $fb=$_POST["fb"];
  $lkdn=$_POST["lkdn"];
  $usrid=$id; 

$sql = "INSERT INTO corp_user_profile (id, industry, size, nation, region, url, facebook, linkedin)  
VALUES ('$usrid', '$industry','$size', '$country', '$region', '$website', '$fb', '$lkdn')";


if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>

我曾经使用我之前使用过的文件，只是为了确保在一周的bug修复后一切正常。

有人可以告诉我问题在哪里，可能为什么避免这样的未来问题是错误的呢？

Answer 1

您可能希望通过将事件传递到Enum函数并调用click来阻止默认行为。

Answer 2

最明显的错误（除了上面提到的SQL注入内容之外）就是这样 <button type="submit"将导致表单通过回发正常提交，除非您使用脚本阻止它。将event.preventDefault()添加到＆＃34;的第一行;点击＆＃34;处理程序。

$("#submit").click(function(event){
    event.preventDefault(); //prevent default postback behaviour
    var size=$("#size").val();
//...etc

您正在查看网址中的数据，因为表单正常发布（在ajax有机会运行之前）并执行GET，因为表单中没有指定其他方法标记，GET是默认值..

相同的结构，但Ajax成功响应的行为与以前的版本

2 个答案: