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

问题描述：

一直在使用Ajax编写一个表单并用于之前没有额外（css等）的版本。它工作得很好，数据已成功插入到数据库中，并且我能够显示和隐藏两个div。现在我曾经将它应用到我一直在处理的窗体上。它的行为与以前的版本不同，因此它完全相同（确实，更改了一些名称，添加了一些输入），就像PHP文件中没有“成功消息”，突然URL中的所有数据都可见，当前表单不会“ t隐藏并显示下一个。结构相同，但Ajax的成功响应与以前版本的行为有所不同

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

当前文件是：

<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一个星期后一切正常。

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

[你看过浏览器开发工具中的AJAX请求/响应了吗？你有没有在项目中包含jQuery库？是否有任何错误报告？你在网络服务器上运行它吗？]（http://jayblanchard.net/basics_of_jquery_ajax.html） –

[Little Bobby]（http://bobby-tables.com/）说*** [你的脚本在SQL注入攻击的风险。]（http://*.com/questions/60174/how-can-i-prevent-sql-injection-in-php）***了解[prepared]（http：// en .wikipedia.org/wiki/Prepared_statement）[MySQLi]的声明（http://php.net/manual/en/mysqli.quickstart.prepared-statements.php）。即使[转义字符串]（http://*.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string）是不安全的！ –

你在哪里设置你的会话变量？ –

答

最明显的错误（除了上面提到的SQL注入的东西）是 <button type="submit"将导致表单通过回发正常提交，除非您使用脚本阻止它。将event.preventDefault()添加到“click”处理程序的第一行。

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

你在URL中看到的数据，因为表单通常发布（阿贾克斯有机会运行之前），做一个GET，因为有形式的标记没有指定的其他方法，得到的是默认..

它的工作原理！感谢ADyson提供解决方案和解释。现在它可以工作。我学到了一些东西。 – nucky

答

您可能希望通过将事件传递给您的click函数并呼叫event.preventDefault()来防止默认行为。

“提交表单可能已经改变了页面的URL，导致你的AJAX URL不同，因为你使用的是相对URL”。这是无关紧要的，因为a）表单没有指定和操作，所以会回发给自己，使URL保持不变，并且b）ajax永远不会运行，因为回发页面会破坏页面和正在运行的任何JavaScript在上面。在下一次刷新时，即使恢复了相同的脚本，它仍然永远不会得到执行的机会。 – ADyson

我删除了该行，因为您对该网址正确。我刚做了一个测试用例，但ajax请求肯定仍然被触发。 – vi5ion

如果页面没有回传_immediately_，那么可能会发生这种情况，所以我的前面的陈述可能有点过于绝对，但在完整的回传之前你可能永远不会得到回应。尽管通过提交相同的数据两次，但不会阻止它在服务器上搞砸！无论哪种方式，我们都提出了相同的解决方案，我相信它会解决它。 – ADyson

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

相关推荐