如果有警报，Javascript函数才有效 [英] Javascript function only works if there's an alert

问题描述

此代码执行 post.php ：

 函数SubmitForm ）{
 var input = $（＃input）。val（）; 
 var user =anon; 
 $ .post（post.php，{input：input，user：user}，function（data）{}）; 
 alert（hello）; 
} 
  

但是，如果我删除一行，则不会：

 函数SubmitForm（）{
 var input = $（＃input）。val（）; 
 var user =anon; 
 $ .post（post.php，{input：input，user：user}，function（data）{}）; 
} 
  

似乎不合理，但为何会发生这种情况？

JS应该调用的PHP向数据库中插入一些值：

 <？php 
 
 
 $ dbhost =xxx; 
 $ dbname =xxx; 
 $ dbuser =xxx; 
 $ dbpass =xxx; 
 
 //创建连接
 $ con = mysqli_connect（$ dbhost，$ dbuser，$ dbpass）; 
 
 //检查连接
 if（！$ con）{
 die（Database connection failed：。mysqli_error（））; 
} 
 
 //选择数据库
 $ db_select = mysqli_select_db（$ con，$ dbname）; 
 $ b $ //检查选择
 if（！$ db_select）{
 die（Database selection failed：。mysqli_error（））; 
} 
 
 $ message = $ _POST [input]; 
 $ user = $ _POST [user]; 
 echo $ message; 
 echo $ user; 
 
 $ query =INSERT INTO posts（user，message）VALUES（'$ user'，'$ message'）; 
 mysqli_query（$ con，$ query）; 
？> 
  

解决方案

你的问题是这个函数被调用 onsubmit / onclick 事件处理程序。 AJAX是异步的，意味着它在后台运行。当您调用 $。post 时，代码会继续，并且将来会调用回调函数。

正在发生的事情是表单正在提交，所以页面正在被重定向。这发生在AJAX调用完成之前。 alert 会暂停浏览器，因此它会让AJAX调用有机会完成。

您需要阻止浏览器

 < input type =submitclass =buttonid =button_post value =POSTonclick =SubmitForm（）; return false;> 
  

 < input type =submitclass =button我们建议您在JavaScript中绑定事件处理函数， id =button_postvalue =POST> 
 
< script> 
 $（function（）{
 $（'＃button_post'）。click（function（e）{
 e.preventDefault（）; 
 SubmitForm（）; 
}）; 
}）; 
< / script> 
  

This code executes post.php:

function SubmitForm() {
    var input = $("#input").val();
    var user = "anon";
    $.post("post.php", {input: input, user: user}, function(data) {});
    alert("hello");
}

But if I remove a line, this doesn't:

function SubmitForm() {
    var input = $("#input").val();
    var user = "anon";
    $.post("post.php", {input: input, user: user}, function(data) {});
}

Seems irrational, but why is this happening?

The PHP which the JS should call inserts some values into the database:

<?php


$dbhost = "xxx";
$dbname = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";

// Create connection
$con = mysqli_connect($dbhost, $dbuser, $dbpass);

// Check connection
if (!$con) {
    die("Database connection failed: " . mysqli_error());
}

// Select database
$db_select = mysqli_select_db($con, $dbname);

// Check selection
if (!$db_select) {
    die("Database selection failed: " . mysqli_error());
}

$message = $_POST["input"];
$user = $_POST["user"];
echo $message;
echo $user;

$query = "INSERT INTO posts (user, message) VALUES ('$user', '$message')";
mysqli_query($con, $query);
?>

解决方案

Your problem is that this function is being called in an onsubmit/onclick event handler. AJAX is asynchronous, meaning it runs in the background. When you call $.post, the code continues on and the callback is called at some point in the future.

What is happening is that the form is being submitted, so the page is being redirected. This is happening before the AJAX call finishes. The alert pauses the browser, so it gives the AJAX call a chance to finish.

You need to block browser from performing the "default" action.

<input type="submit" class="button" id="button_post" value="POST" onclick="SubmitForm(); return false;">

P.S. I suggest that you bind event handlers in JavaScript versus inline handlers.

<input type="submit" class="button" id="button_post" value="POST">

<script>
$(function(){
    $('#button_post').click(function(e){
        e.preventDefault();
        SubmitForm();
    });
});
</script>

这篇关于如果有警报，Javascript函数才有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！