微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Ajax表单提交,如何使它起作用

如何解决Ajax表单提交,如何使它起作用

| 帮帮我,我正在尝试提交一个表单-ajax样式。 本质上,我希望能够将表单“提交”到另一个页面,而无需将用户重定向到第二个页面。理想情况下,它将在表单页面显示某种“成功”或“失败”消息。 下面的代码不起作用。我不确定是什么问题。 我已经通过将用户发布并重定向页面来测试了我的process.PHP,它可以完美地工作。关于如何使它与Ajax一起使用,我有什么建议吗? (我正在使用jquery)
<script>
    $(function() { // wait for the DOM to be ready
    $(\'#personal_email\').submit(function() { // bind function to submit event of form
       $.ajax({
          type: $(this).attr(\'method\'),// get type of request from \'method\'
          url: $(this).attr(\'action\'),// get url of request from \'action\'
          data: $(this).serialize(),// serialize the form\'s data
          success: function(responseText) {
              // if everything goes well,update the div with the response
              $(\'#result\').html(responseText);
          }
      });
    return false; // important: prevent the form from submitting
    });
   });
</script>
....
<form  name=\"personal_email\" id=\"personal_email\" action=\"proccess.PHP\" method=\"post\">
 <fieldset>
     <input type=\"text\" id=\"newsletteremail\" name=\"newsletteremail\" value=\"my email address\" onfocus=\"if(this.value==\'my email address\')this.value=\'\'\"/>
     <input type=\"submit\" value=\"Subscribe\" />
   </p>
 </fieldset>
</form>
    

解决方法

        以下对我有用:
<html>
<head>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js\" ></script>
<script type=\"text/javascript\">
    $(document).ready(function() { // wait for the DOM to be ready
    $(\'#personal_email\').submit(function() { // bind function to submit event of form
       $.ajax({
          type: $(this).attr(\'method\'),// get type of request from \'method\'
          url: $(this).attr(\'action\'),// get url of request from \'action\'
          data: $(this).serialize(),// serialize the form\'s data
          success: function(responseText) {
              // if everything goes well,update the div with the response
              $(\'#result\').html(responseText);
          }
      });
    return false; // important: prevent the form from submitting
    });
   });
</script>
</head>
<body>
<div id=\"result\"></div>
<form  name=\"personal_email\" id=\"personal_email\" action=\"process.php\" method=\"post\">
 <fieldset>
     <input type=\"text\" id=\"newsletteremail\" name=\"newsletteremail\" value=\"my email address\" onfocus=\"if(this.value==\'my email address\')this.value=\'\'\"/>
     <input type=\"submit\" value=\"Subscribe\" />
   </p>
 </fieldset>
</form>
</body>
</html>
    

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。