Javascript Jquery .load 和 POST 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10159113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .load and POST data
提问by Katherine Perotta
This is really frustrating I would appreciate some help with this. I have a div, called comments and a form inside of that div. What I want to do is post a form to the current page and have it load inside of the div without reloading the entire thing. Here is my current code:
这真的令人沮丧，我将不胜感激。我有一个 div，称为评论和该 div 中的一个表单。我想要做的是将表单发布到当前页面并让它在 div 内加载而不重新加载整个内容。这是我当前的代码：
<div id="comments">
<form action="#" method="post" onsubmit="return false;" >
<input type="hidden" name="txtname" value="test">
<textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"></textarea>
<input type="submit" name="post" id="post" value="Submit">
</form>
<script type="text/javascript">
EDIT: Read edit below for current code
</script>
</div>
When I submit, the alert fires, but the page does not load. It works fine if I make the event as follows:
当我提交时，警报会触发，但页面不会加载。如果我按如下方式进行事件，它工作正常：
$("#comments").load("comments.asp");
It's not liking the posting of data. I have used .load before but never to post data. I got the above code from these very same forums.
它不喜欢发布数据。我之前使用过 .load 但从未发布过数据。我从这些相同的论坛中获得了上述代码。
I'm honestly not sure of the purpose of 'name' and 'tel' - do I refer to those variables or the form variable names when processing the code? This is in ASP classic.
老实说，我不确定“名称”和“电话”的用途 - 在处理代码时我是指这些变量还是表单变量名称？这是在 ASP 经典中。
What's wrong with the above code, how can I get it to send data from the forum via POST? Thanks!
上面的代码有什么问题，我怎样才能让它通过POST从论坛发送数据？谢谢！
EDIT: I am now using the following code:
编辑：我现在使用以下代码：
$("#post").submit(function(event){
var $form = $(this),
$inputs = $form.find("input, select, button, textarea"),
serializedData = $form.serialize();
$inputs.attr("disabled", "disabled");
$.ajax({
url: "/comments.asp",
type: "post",
data: serializedData,
success: function(response, textStatus, jqXHR){
console.log("comment posted");
},
error: function(jqXHR, textStatus, errorThrown){
console.log(
textStatus, errorThrown
);
},
complete: function(){
// enable the inputs
$inputs.removeAttr("disabled");
}
});
event.preventDefault();
});
And now it's using properly getting the form handled...however it goes to comments.asp. How can I make all the action happen in a certain div (comments div?)
现在它正在使用正确处理表单......但是它转到comments.asp。我怎样才能让所有的动作发生在某个 div 中（评论 div？）
回答by Nick
It seems to me you are blending a bunch of different techniques in a way that is not entirely coherent.
在我看来，你正在以一种不完全连贯的方式混合一堆不同的技术。
$.post is a shortened version of $.ajax (see here).
$.post 是 $.ajax 的缩短版本（请参阅此处）。
$.load takes a url and sticks it into a <div>or other DOM Element (see here).
$.load 获取一个 url 并将其粘贴到一个<div>或其他 DOM 元素中（请参阅此处）。
If I understand it correctly (and I may not!), you're not really wanting to load the form, but put values into the form fields. $.load is an odd way to do this. (It may work, but I do it another way.)
如果我理解正确（我可能不会！），您并不是真的想加载表单，而是将值放入表单字段中。$.load 是一种奇怪的方式来做到这一点。（它可能有效，但我用另一种方式来做。）
If you're using $(#...).submit, you can also leave out a whole bunch of stuff in your form. The following should work fine.
如果您使用 $(#...).submit，您还可以在表单中省略一大堆内容。以下应该可以正常工作。
<form id="form_id">
...
<input type="submit" value="Submit">
</form>
My method is: (1) have a hardcoded HTML form (or build it by AJAX), (2) get the values from the DB (or wherever) using $.post (or $.ajax), (3) stick the values into the form using .val() (or equivalent - whatever is right for the input type) and the DOM id of that input, and then (4) use .submit (in a manner similar to yours). You will need to add preventDefault as the others have suggested.
我的方法是：（1）有一个硬编码的 HTML 表单（或通过 AJAX 构建它），（2）使用 $.post（或 $.ajax）从数据库（或任何地方）获取值，（3）粘贴值使用 .val() （或等效的 - 任何适合输入类型的东西）和该输入的 DOM id 进入表单，然后（4）使用 .submit （以类似于您的方式）。您需要按照其他人的建议添加 preventDefault 。
You're also muddying the waters using #post as the DOM id. You really want to give the form itself the ID, and then use $(#form_id).submit(... I can't test it now, but having the submiton the input field may cause some grief. The official exampleattaches the .submit to the form id.
您还使用 #post 作为 DOM id 搅浑了水。你真的想给表单本身的ID，然后使用$(#form_id).submit(...我现在无法测试它，但是submit在输入字段上可能会引起一些悲伤。官方示例附上了.提交到表单ID。
I'm also not sure the <div>with id 'comments' really does much. I have a container id like your 'comments', but that's because I build forms by AJAX and stick them into the container. If you don't need to do that, the id 'comments' is unnecessary to the whole procedure.
我也不确定<div>with id 'comments' 真的有多大作用。我有一个像您的“评论”一样的容器 ID，但那是因为我通过 AJAX 构建表单并将它们粘贴到容器中。如果您不需要这样做，则整个过程不需要 id 'comments'。
回答by Shyju
Your text box element dont have an id with value txtname. But in your script you are trying to access using #(which is supposed be with an id context). So add an id element to your input box.
您的文本框元素没有带 value 的 id txtname。但是在您的脚本中，您试图访问 using #（应该使用 id 上下文）。所以在你的输入框中添加一个 id 元素。
<input type="hidden" name="txtname" id="txtname" value="test">
And as expascarello said, You need to stop the default behaviour of the submit button . Other wise it will do the normal form posting so you wont be able to feel the ajax effect.
Use preventDefault
正如 expascarello 所说，您需要停止提交按钮的默认行为。否则，它将执行正常的表单发布，因此您将无法感受到 ajax 效果。用preventDefault
$(function(){
$("#post").click(function(e) {
e.preventDefault()
alert("clicked");
$("#comments").load("comments.asp", {
'name': $("#wysiwyg").val(),
'tel': $("#txtname").val()
});
});
});
回答by epascarello
You are not cancelling the clicking of the button so the form is submitting and resetting the page.
您不会取消单击按钮，因此表单正在提交并重置页面。
$("#post").click(function(evt) {
evt.preventDefault();
...
The load() method does a get and not a post.
load() 方法执行 get 而不是 post。
