Question

好的，所以我对webdeveloping相当新，所以可能是一个愚蠢的问题：

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

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

我不需要完整的答案，只要有任何提示走上正确的道路将非常感谢！

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

头部

<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
    });
});

您需要先捕获点击事件.bind("click")。然后启动ajax调用$.post，您将向其发送数据。这些数据通过POST阵列在服务器上接收。

Answer 2

像乔希说的那样，jQuery就是这样的方式。

你想要做三件事：

将点击处理程序附加到按钮，例如“onclick ='doSomething（）;'”
在该函数中，使用jQuery对类似
的脚本执行异步发布
$ .post（“test.php”，{name：“John”，time：“2pm”}，功能（数据）{ alert（“数据加载：”+数据）; }）;
当这种情况发生时，您可以对该数据（而不是上面的警告）执行某些操作，例如$（'＃listnode'）。append ...这会将HTML粘贴到您的列表中

这是一般模式，但你必须适应你的情况。

Answer 3

很难从你给我们的东西中回答你的问题，但我会假设知之甚少。

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

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

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

如果您想使用AJAX替换部分屏幕，那么您将面临更多问题。诀窍是用所请求的数据替换div标签的内容。

简单的PHP / AJAX问题

3 个答案: