Question

我的表格：

          <form class="form-inline signup" action="php/signupForm.php" role="form" id="signupForm">
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Email address">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-theme ladda-button" data-style="expand-left">
<span class="ladda-label" id="notice">Get notified!</span>
</button>
        </div>
      </form>

我的php脚本的结尾

$response = array(
    "status" => $status,
    "message" => $message
);

echo json_encode($response);

我的网页正在接收以下数据：

{"status":0,"message":"This email is already on list!"}

使用JS我需要解析该数据，然后更新元素中的文本。

 <span id="notice">Get notified!</span>

这是我的脚本无法正常工作，在将表单数据传递到我的php脚本后，我得到一个显示json强大的白色屏幕

    $(document).ready(function() {
      $.ajax({
      dataType: 'json',
        $('#notice').text(data.message);
      });
    });

Answer 1

您必须在回调中处理响应。

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
          data: $(this).serialize(),
          url: $(this).attr('action'), // Or the path of the PHP file
          dataType: 'json',
        }).done(function(response) {
          $('#notice').text(response.message);
        });
    });
});

请参阅相关文档here

Answer 2

ajax调用没有很好地形成，缺少成功回调和url，例如：

$(document).ready(function () {
    $.ajax({
        url: '/the/url/where/your/data/comes/from/',
        dataType: 'json',
        success: function (data) {
            $('#notice').text(data.message);
        }
    });
});

Answer 3

您的代码按原样执行，只是在页面加载时执行，而不是在提交表单时执行。您需要附加一个onsubmit事件，阻止执行表单提交的默认操作，并在那里进行ajax调用。你的ajax调用本身也是格式错误的

$("#yourFormID").submit(function(e){
    e.preventDefault();
    $.ajax({
       url:"/urlToServerScript",
       data:{} //any form data the script needs you should be put here,
       dataType:"json" //type of response the server will output
    }).then(function(data){
       $('#notice').text(data.message);
    });
});

使用从php接收的JS解析json数据

3 个答案: