Question

我试图通过在提交表单时不重新加载来提高表单的可用性。在下面的例子中，我想在名为＆＃34; delete-image＆＃34;的提交按钮时调用index.php。点击。请注意，表单中有两个按钮，因此jQuery应该检查类型=＆＃34;提交＆＃34;名称＆＃34;删除图像＆＃34;被单击而不是仅在提交表单时触发。此外，当＆＃34;删除图像＆＃34;按下，jQuery应该将img的源代码更改为＆＃34; deleted.jpg。＆＃34;

我听说jQuery的.post（）是解决这个问题的最佳方式，但请记住，关键是不要重新加载页面。

<form action="index.php" method="post" enctype="multipart/form-data" class="edit">
    <img src="test.jpg" alt="">
    <input type="submit" name="delete-image" value="Delete Image"><br>
    <input type="submit" value="Go">
</form>

欢迎任何建议。

Answer 1

看看这个答案。您正在寻找的是使用ajax的异步帖子。

http://www.w3schools.com/ajax/default.ASP

Answer 2

您可以使用jQuery的$.post方法。

参考：http://api.jquery.com/jquery.post

以下是一个例子：

$.post("url", data, function(data){
  // stuff to do when done
});

在你的情况下：

$("input[name='delete-image']").click(function(e){

   // Prevent default form submission
   e.preventDefault();

   // Perform AJAX request
   $.post("index.php", data, function(data){

      // if you plan to change the image source
      // when you've received the response
      $("img").attr("src", "deleted.jpg");
   });
});

以下是它的小提琴：http://jsfiddle.net/domingokyle/EVkP6/1/

要阻止表单提交，您可以使用jQuery的submit()方法

$("form").submit(function(){
  return false;
});

或者将按钮类型更改为“按钮”。

使用jQuery Post方法提交表单并保持同一页面

2 个答案: