页面未在 Chrome 中加载答案

【问题标题】：Page not loading in Chrome页面未在 Chrome 中加载
【发布时间】：2016-04-26 02:40:15
【问题描述】：

我正在处理一个页面，在我添加 AJAX 之前它运行良好。现在，页面甚至不会加载。我收到 Chrome 提供的“糟糕！尝试加载此页面时出现问题”消息。文件在服务器上。我无法调出开发人员工具，因为它甚至不会加载。不过，它将在 Internet Explorer 中加载。有没有人看到任何会导致加载失败的东西？我以前从来没有遇到过这个问题。

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <title></title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.block {
    display: block;
    margin: 25px 10px;
}
#text-success {
    display: none;
    color: red;
}
</style>    
</head>
<body>  
<form action="" method="POST">
    <input type="number" placeholder="Phone Number" class="block" id="number">
    <select class="block" id="carrier">
        <option>Verizon</option>
        <option>Virgin Mobile</option>
        <option>Alltel</option>
        <option>AT&T</option>
        <option>Boost Mobile</option>
        <option>Republic Wireless</option>
        <option>Sprint</option>
        <option>T-Mobile</option>
        <option>U.S. Cellular</option>
    </select>
    <textarea placeholder="Your Message" class="block" id="message"></textarea>
    <input type="submit" value="Send Text" id="submit-text">
    <p id="text-successful">Your Message Sent Successfully!</p>
</form>
<script>
jQuery(document).ready(function() {
$("#submit-text").on("click", function(event) {

    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
});
$.ajax({
    url: "text-send.php",
    type: "POST",
    data: {
        "number": number,
        "carrier": carrier,
        "message": message
},
success: function(data) {
    //console.log(data); // data object will return the response when status code is 200
    if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
    } else {
        $(".project-container").addClass("removeClass");
        $("#text-success").show();
        $(".light-gray-container").hide();
    }
},
complete: function() {
    $('body, html').animate({
        scrollTop: $('.email-success').offset().top
    }, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
    alert(textStatus + "|" + errorThrown);
    //console.log("error"); //otherwise error if status code is other than 200.
}
});
});
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

我认为您想在单击按钮时进行 ajax 调用。

此外，由于输入按钮 type="submit" 您需要使用 event.preventDefault()，因此请停止默认行为并进行 ajax 调用。否则，您可以将类型 submit 更改为类型 button

此外，ajax 在点击功能之外。也许这就是页面无法加载的主要原因。由于它在click 之外，它会在文档准备好后立即尝试进行 ajax 调用

jQuery(document).ready(function() {
$("#submit-text").on("click", function(event) {

    event.preventDefault(); 

    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
 // Removed the closing braces of click function
$.ajax({
    url: "text-send.php",
    type: "POST",
    data: {
        "number": number,
        "carrier": carrier,
        "message": message
},
success: function(data) {
    //console.log(data); // data object will return the response when status code is 200
    if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
    } else {
        $(".project-container").addClass("removeClass");
        $("#text-success").show();
        $(".light-gray-container").hide();
    }
},
complete: function() {
    $('body, html').animate({
        scrollTop: $('.email-success').offset().top
    }, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
    alert(textStatus + "|" + errorThrown);
    //console.log("error"); //otherwise error if status code is other than 200.
}
}); // Added closing braces
})
});

【讨论】：

一定是它。它一定一直处于不断的提交阶段，只是不断地重新加载。谢谢！！