Question

我开发了一个简单的表单，用户可以在其中输入作者姓名。将使用数据库中的Node JS查询该名称，以检查是否存在此作者编写的推文。如果没有数据，我想通过显示警报来使用Ajax响应客户端。

这是客户方：

<html>
<head>
<script>
        $(document).ready(function() {
            $.ajax({
                error: function(error){
                    if(error.responseText == 'showAlert'){
                        alert("Please enter correct user name and password.");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form action="/process_post" method="POST">
        <select name="SearchTypes">
            <option value="Author" selected>Author</option>
            <option value="Mention">Mention</option>
            <option value="Tag">Tag</option>
        </select>
        <input type="text" name="term">
        <br><br>
        <input type="submit" value="Submit">
    </form>

</body>
</html>

这是Node JS中包含响应的部分：

var query = connection.query(queryString, [term,term], function(err, rows) {
        console.log(rows);
        var tweet = JSON.parse(JSON.stringify(rows));
        if (tweet.length == 0){
            res.status(500).send('showAlert');
        }else{
            for(var i in tweet){
            res.write("Author: ");
......

如您所见，我使用res.status(500).send('showAlert');将响应发送到客户端，但实际发生的是当我提供的数据库中没有任何数据的输入时（推文长度为零），它只需在HTML页面中打印showAlert即可。

Answer 1

这是因为上述JavaScript仅在出现错误时才运行控件，但您的消息将作为正确的响应发送。您应该更改您的客户端代码，以便在成功的情况下进行检查，如下所示：

    $(document).ready(function() {
        $.ajax({
            error: function(error){
                if(error.responseText == 'showAlert'){
                    alert("Please enter correct user name and password.");
            success: function(result){
                      if (result.responseText == 'showAlert'){
                            alert("There was an error")
                      }else{
                          //Do things...
                      }
                     }
                }
            }
        });
    });

Answer 2

您希望在表单提交处理程序中包装ajax调用。现在，当您提交表单时，它正在执行完整的同步请求并返回文本“showAlert”。

$(document).ready(function() {
    $('form').on('submit', function (e) {
      // keep the form from submitting synchronously
      e.preventDefault();

      var $form = $(e.currentTarget);

      // submit via ajax
      $.ajax({
        url: $form.attr('action'),
        method: $form.attr('method'),
        data: $form.serialize()
      })
      .done(function (response) {
        console.log('done: ', arguments);
      })
      .fail(function(error){
        console.log('failed: ', arguments);
        if(error.responseText == 'showAlert'){
          alert("Please enter correct user name and password.");
        }
      })
    });
});

根据需要移除对console.log的调用。有关该通话中的选项，请参阅$.ajax。

您可能还想给form一个ID，然后以这种方式引用它，例如$('#myForm')，以便您可以向页面添加更多表单而不会出现任何问题。

使用基于Node JS响应的Ajax在浏览器中发出警报消息

2 个答案: