提交带有$ .ajax的表单是否自相矛盾？

I am currently working on an MVC application where I use a lot of jQuery and html forms. However, recently I have noticed that these seem to contradict each other somewhat...

我目前正在开发一个MVC应用程序,我使用了大量的jQuery和html表单。然而,最近我注意到这些似乎在某种程度上相互矛盾......

For example, I have to prevent the forms default submit to process my AJAX call, otherwise the server gets called twice which leads me to question the idea of using AJAX to submit the form. Wouldn't it be better instead to just hook the $.ajax call to an <input type="button" /> than an <input type="submit" />?

例如,我必须阻止表单默认提交来处理我的AJAX调用,否则服务器被调用两次,这导致我质疑使用AJAX提交表单的想法。将$ .ajax调用挂钩到而不是是不是更好?

So, is it contradictory to have a form that is submitted through ajax?

那么,拥有一个通过ajax提交的表单是否自相矛盾?

4 个解决方案

#1

The reason you would put the ajax call on a submit button is so there is a natural fallback if the user has javascript disabled. You should have your backend logic detect if the request is an ajax request or just a straight up submit and be able to either send the data back if it's ajax or process the request the 'old school' way if not.

您将ajax调用放在提交按钮上的原因是,如果用户禁用了javascript,则会有自然的回退。您应该让后端逻辑检测请求是ajax请求还是直接提交,并且如果它是ajax则能够发回数据,或者如果没有则以“旧学校”的方式处理请求。

Edit: For context.

编辑:对于上下文。

<form action="/processForm.php" method="POST">
   <input type="submit" value="submit" />
</form>

Then your jQuery could look like this

然后你的jQuery看起来像这样

$('form').bind('submit', function(e){
    e.preventDefault();
    //do your stuff
});

If the user has disabled javascript, the form will just submit to /processForm.php like normal.

如果用户已禁用javascript,则表单将像正常一样提交到/processForm.php。

You can detect if the form was sent via ajax or not with the following php (I don't know if that's what you're using, but it's what I've got).

您可以使用以下php检测表单是否通过ajax发送(我不知道您使用的是什么,但这是我所拥有的)。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  /* handle ajax here */
}else{
  /* handle normal submit here */
}

#2

I wouldn't say that it's "contradictory". It certainly isn't necessary to use a <form> element when submitting a form via ajax, but you still may want to use one for semantic purposes.

我不会说这是“矛盾的”。在通过ajax提交表单时,当然没有必要使用

And yes, i'd just use an <input type="button" /> rather than type="submit" because that way you want have to prevent the default form submission.

是的,我只是使用而不是type =“submit”,因为你想要的方式必须阻止默认表单提交。

#3

It depends on what your trying to do. Generally speaking I try to use and then handle the call with $.ajax() ... but sometime that wont work with asp.net mvc. For example if you are uploading a file, asp.net validation chokes. To get around that I I use the ajaxForm plugin and use that to wrap a standard form.

这取决于你想做什么。一般来说,我尝试使用然后使用$ .ajax()处理调用...但有时候不能使用asp.net mvc。例如,如果您要上传文件,则asp.net验证会阻塞。为了解决这个问题,我使用ajaxForm插件并使用它来包装标准表单。

#4

I don't think so.

我不这么认为。

You can make it a fallback when the user doesn't have javascript enabled so the form is submited to the server and the user can still use your web page.

当用户没有启用javascript时,您可以将其作为后备,以便将表单提交给服务器,用户仍然可以使用您的网页。

For this your backend needs to be aware if it is an ajax call. I see you are using jQuery, jQuery ajax sends a header x_request_with: xmlhttprequest, and if you use PHP in the backend you can capture that in $_SERVER['http_x_request_with'].

为此,如果是ajax调用,你的后端需要知道。我看到你正在使用jQuery,jQuery ajax发送头x_request_with:xmlhttprequest,如果你在后端使用PHP,你可以在$ _SERVER ['http_x_request_with']中捕获它。

#1