从 PHP 返回的 jQuery JSON答案

【问题标题】：jQuery JSON returned from PHP从 PHP 返回的 jQuery JSON
【发布时间】：2015-03-27 01:26:18
【问题描述】：

我有一个简单的HTML form，用户可以在其中从数据库中搜索一个单词，如果该单词在数据库中，PHP 将结果作为JSON 对象返回。

奇怪的是，当用户通过单击按钮而不是按 Enter 键进行搜索时，会为数据库中的单词返回 JSON 对象。当用户按回车键或单击按钮进行搜索时，我有以下两个功能要处理。当用户在文本字段中输入单词后按回车键进行搜索时，如何改进我的代码以从 PHP 获取 JSON 对象？

$('#word-submit').on('click', function() {
  var word = $('#word').val();
  $.post('ajax/name.php', {word: word}, function(data) {
    var obj = jQuery.parseJSON(data);
    console.log(obj); //I see the object in Chrome console log.
  });

});

$('#word').keypress(function(e) {
  if (e.which == 13) {
    var word = $('#word').val();
    $.post('ajax/name.php', {word: word}, function(data) {
      var obj = jQuery.parseJSON(data);
      console.log(obj); //No object is return here. Why? May be something is wrong in my code.
    });
  }
});

<html>

<head>
  <title>Welcome</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="container">
    <form>
      <input type="text" id="word">
      <input type="button" id="word-submit" value="Search">

    </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/global.js" charset="UTF-8"></script>
</body>

</html>

PHP 脚本运行良好。所以这里就不贴了。

【问题讨论】：

看起来代码没什么问题，按回车的时候，浏览器没有刷新吗？？
是的。当我按下回车键时页面会重新加载，但当我点击按钮时不会。它只是简单地获取结果并显示它而不重新加载页面。
你能不能把e.preventDefault();放在第一个括号后面的if块里面，然后再输入一次
有效！感谢您的帮助。

标签： php jquery json

【解决方案1】：

问题很可能是您的表单正在提交。我只需在表单的 submit 事件上添加一个侦听器，该事件应该处理单击按钮并点击 Enter，例如

$(form).on('submit', function(e) {
    e.preventDefault(); // don't submit
    var word = $('#word').val();
    $.post('ajax/name.php', {word: word}, function(data) {
        console.log(data);
    }, 'json');
});

理想情况下，您不必解析 JSON 甚至告诉 jQuery 响应数据类型（参见上面的 'json' arg）。确保你的 PHP 脚本有这样的东西......

header('Content-type: application/json');
echo json_encode($someDataArrayOrObject);
exit;

为了让按钮和上面一样工作，把它的类型改成submit，即

<input type="submit" id="word-submit" value="Search">

【讨论】：

@Zip 不客气。我不得不再补充一点关于按钮类型，希望您不要错过

【解决方案2】：

按钮起作用，因为它阻止表单自动提交/重新加载。

在该文本框上按 Enter 键会导致表单提交，然后自行重新加载，甚至不会触发 $('#word').keypress(function(e))。

【讨论】：

问题是关于为什么在按下按钮时在文本框中按下 enter 什么都不做。我错过了阅读类型提交，因为它的名称 id 已提交:) 抱歉。