如何使用AJAX / jQuery / JavaScript提交表单? [关闭]

我有一个PHP网站,其中有很多表单可以提交到某些页面。 所以他们看起来像这样:</ p>

 &lt; form method ='post'action ='form_target.php'&gt; 
&lt; input type ='text'name =' fieldname'/&gt;
&lt; button type ='submit'/&gt;
&lt; / form&gt;
</ code> </ pre>

我想同样的事情可以用 $ .post('form-target.php'); </ code>,实际上没有离开页面。 但是我试图阻止为许多不同形式编写JavaScript代码。</ p>

那么有一种简单的方法来检测页面上的表单,并将它们转换为AJAX调用吗? 也许通过bind onsubmit()</ code>或 onclick(); </ code>事件到 $ .post(); </ code>调用?</ p>

任何帮助实现这一点也将不胜感激。</ p>
</ div>

展开原文

原文

I have a PHP website, which has a lot of forms that goes to certain pages on submit. So they look like this:

<form method='post' action='form_target.php'>
    <input type='text' name='fieldname' />
    <button type='submit'/>
</form>

I guess the same thing can be done with $.post('form-target.php');, without actually leaving the page. But I'm trying to prevent writing JavaScript code for a lot of different forms.

So is there a simple way to detect forms on the page, and convert them to AJAX calls? Maybe by bind onsubmit() , or onclick(); events to a $.post(); call?

Any help to implement this will also be appreciated.

drsrq26482
drsrq26482 可能重复的jQueryAJAX提交表单
大约 7 年之前 回复
dti70601
dti70601 是的,你是使用onsubmit的例子将是一个干净的方法。(当然使用正确的jQuery方法绑定到submit事件)
大约 7 年之前 回复
doucheng7534
doucheng7534 你的意思是.submit()或.on('submit'
大约 7 年之前 回复
drozwmi5440
drozwmi5440 $('form')。onsubmit(...)应该很容易。
大约 7 年之前 回复

4个回答

You can attach the .submit event to all forms to catch the submission, then use .preventDefault() on the event object to prevent actual page submission (stop it from changing page). Then serialize the form's data (make a name-value paired string), get the url from the action attribute of the form element and then call jquery's ajax function

using $("form") with nothing else as part of the selector will attach this to all forms on the page

HTML

<form method='post' action='form_target.php'>
    <input type='text' name='fieldname' />
    <button type='submit'/>
</form>

JAVASCRIPT

$("form").submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr("action");
    $.ajax({
       url:url,
       type:"POST",
       data:data,
       success:function(){
          //do something when post succedes 
       },
       error:function() {
          // do something when it fails
       }
    });
});

JQuery .ajax

JQuery .serialize

JQuery .submit

To further extend this you could make it so each form executes a specific success method, this would help in the case that you need something specific to happen for a specific form submission.

First give each form a data-* attribute that we can later use in the submit event to trigger a specific function for that form.

<form method='post' action='form_target.php' 
                    data-onerror="nameSubmitError" 
                    data-onsuccess="nameSubmitSuccess">

Then create the two functions that we named in the data-* attributes

function nameSubmitError() {
  //Do some code that will handle the error
}

function nameSubmitSuccess() {
  //Do some code that will handle the success
}

And in the .submit event

$("form").submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var errorCallback = $(this).data("onerror");
    var successCallback = $(this).data("onsuccess");
    $.ajax({
       url:url,
       type:"POST",
       success:function(){
          //Check that we have a defined function before trying to execute it
          if( typeof(window[successCallback]) == "function" ) {
             //We do have a defined function so execute it
             window[successCallback]();
          }
       },
       error:function() {
          //Check that we have a defined function before trying to execute it
          if( typeof(window[errorCallback]) == "function" ) {
             //We do have a defined function so execute it
             window[errorCallback]();
          }
       }
    });
});

Of course putting all the callback functions in the global space would pollute it so you could setup all the functions into a single object and use the objects name instead of window

var formCallbacks = {
    nameSubmitError:function() {
      //Do some code that will handle the error
    },
    nameSubmitSuccess: function() {
      //Do some code that will handle the success
    }
};

And in the .submit event change window to formCallbacks

//window[errorCallback]();
//Becomes 
formCallbacks[errorCallback]();
dtng25909
dtng25909 我发现所有这些表单属性都不必要。 它使不引人注目的脚本侵入,这是我不喜欢DOJO的事情之一。 只需在代码中定义回调,你就可以了。
大约 7 年之前 回复
duandi6531
duandi6531 是的,忘了添加数据选项抱歉,编辑纠正,还添加了如何扩展它,以便您可以为每个表单执行特定的回调。
大约 7 年之前 回复
dongnaopa6200
dongnaopa6200 哦,我已经添加了数据:数据,类型:“POST”,现在它完全有效:)再次感谢你!
大约 7 年之前 回复
douliaodun9153
douliaodun9153 我尝试了你的解决方案,(加载jquery后)控制台没有显示任何错误,但表单仍然通过转到页面提交。 也不会调用成功和错误函数。 就像我根本没有添加脚本一样。 我应该在表格后写这个脚本吗? 编辑:我将你的代码包装在$ document.ready(function(){}); 现在它可以工作,但会出错。 我会尝试解决它:)谢谢你的帮助! 并感谢所有其他答案。
大约 7 年之前 回复
doushuangdui5419
doushuangdui5419 链接周围的<kbd> </ kbd>
大约 7 年之前 回复
dts777777
dts777777 哇,你是怎么在最后设置这些链接的?
大约 7 年之前 回复



是的,您可以尝试 http://malsup.com/jquery/form/ ,这个使用非常简单.. </ p>

 &lt; html&gt;

&LT; HEAD&GT;

&lt; script src =“http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”&gt;&lt; / script&gt;

&lt; script src =“http://malsup.github.com/jquery.form.js”&gt;&lt; / script&gt;

&lt; script&gt;

//等待加载DOM
$(document).ready(function(){
//绑定'myForm'并提供一个简单的回调函数
$('#myForm')。ajaxForm( function(){
alert(“谢谢你的提交!”);
});
});

&lt; / script&gt;

&lt; / head&gt;
&lt; body&gt;
&lt; form id =“myForm”method ='post'action ='form_target.php'&gt;
&lt; input type ='text'name ='fieldname' /&gt;
&lt; button type ='submit'/&gt;
&lt; / form&gt;
&lt; / body&gt;
&lt; / html&gt;
</ code> </ pre>
</ div >

展开原文

原文

Yes, you can try http://malsup.com/jquery/form/ , this is very simple to use..

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your submit!"); 
            }); 
        }); 
    </script> 
</head>
<body>
    <form id="myForm" method='post' action='form_target.php'>
       <input type='text' name='fieldname' />
       <button type='submit'/>
    </form>
</body>
</html>

douduikai0562
douduikai0562 当然,你可以用表单替换#myForm来定位所有表单。
大约 7 年之前 回复



http:// api.jquery.com/submit/ </ p>

  $(“form”)。on(“submit”,function(event){
//你的AJAX 调用
}
</ code> </ pre>
</ div>

展开原文

原文

http://api.jquery.com/submit/

$( "form" ).on( "submit", function( event ) {
    // Your AJAX call
}



你可以这样做:</ p>

  $('form')。  on('submit',function(){
$ .post(
$(this).prop('action'),//你的url action
$(this).serialize(),//你的数据
success:function(){//你的回调函数
alert('已提交');
}
);
});
</ code> </ pre>
</ div>

展开原文

原文

You can do it like this:

$('form').on('submit', function() {
  $.post(
    $(this).prop('action'), // Your url action
    $(this).serialize(),    // Your data
    success: function() {   // Your callback function
      alert('Submitted');
    }
  );
});

dongzhan1570
dongzhan1570 这给出了错误:Uncaught SyntaxError:意外的令牌:
大约 7 年之前 回复
du_1993
du_1993 是的,我会问这个。 什么是道具? 我可以使用attr()而不是它吗? 而且,它会将“form_target”转换为“mysite.com/form_target”吗?
大约 7 年之前 回复
douxia6554
douxia6554 不要忘记preventDefault或返回false以防止页面更改
大约 7 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐