简单的PHP / AJAX问题

Question

好的，所以我对Web开发还很陌生，所以可能是一个愚蠢的问题：

我有这个搜索表单，它可以自动完成fooditems（从数据库列获取值）并且可以工作。 现在，当我按下“提交”按钮时，我想加载一个代码块，以显示食品项的卡路里等（以及数据库中与食品项相同的行）。

我该如何完成这样的事情。 我知道这是一个相当广泛的问题，但是我真正要问的是，当按下“提交”按钮并使用文本字段中提供的输入作为某种参数时，如何重新加载网站的一小部分。

我不需要完整的答案，只要对正确的方法提出任何建议，将不胜感激！

这是我的输入和按钮代码：

在头上

<script type="text/javascript" src="jquery.js"></script>
<script>
function ok(){
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
}
</script>

在体内：

<form autocomplete="off">
  <p>
   Food <label>:</label>
   <input type="text" name="food" id="food"  / >
  </p>
  <input type="submit" id="submit" value="Submit" onclick="ok()" />

 </form>

要么：

头：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$("input[type='submit']").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

</script>

身体：

    <form autocomplete="off">
      <p>
       Food <label>:</label>
       <input type="text" name="food" id="food"  / >
      </p>
    <input type="submit" id="submit" value="Submit" />
</form>

Answer 1

jQuery和Ajax 。

将该输入更改为按钮

<button id="submit">Save</button>

为此，我将执行以下操作：

$("button#submit]").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

您需要首先捕获click事件.bind("click") 。 然后启动一个ajax调用$.post ，您将向其发送数据。 该数据通过POST数组在服务器上接收。

Answer 2

就像Josh所说的那样，jQuery是通往这里的方法。

您需要做三件事：

1. 将点击处理程序附加到“ onclick ='doSomething（）;'”之类的按钮上

2. 在该函数中，使用jQuery对脚本进行异步发布，例如

   $ .post（“ test.php”，{名称：“ John”，时间：“ 2pm”}，function（data）{alert（“已加载数据：” + data）;}）;

3. 当这种情况再次出现时，您可以使用该数据（而不是上面的警报）执行某些操作，例如$（'＃listnode'）。append ...，这会将HTML粘贴到您的列表中

这是一般模式，但是您必须使其适合您的方案。

Answer 3

从您给了我们的很少的知识很难回答您的问题，但是我将假设很少的知识。

您的输入字段必须在表单标签内。 表单标签包括动作和方法。 该方法必须为“ POST”才能发送数据。 该动作可以是任何URL。

您只需要命名将处理结果的php脚本的URL。

它将在$ _POST ['food']等中找到数据。它必须构建答复页面-整个屏幕，其中包含食物和数据以及您想要的下一次提交的搜索表单。

如果您想使用AJAX替换部分屏幕，那么您会遇到很多问题。 诀窍是用请求的数据替换div标签的内容。