码迷,mamicode.com
首页 > 其他好文 > 详细

form表单submit按钮提交页面不跳转

时间:2018-06-11 13:57:47      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:bsp   code   target   post   NPU   iframe   body   方案   $.ajax   

 

方案一      

技术分享图片
 <html>    
  <body>    
      
  <form action="" method="post" target="nm_iframe">    
      <input type="text" id="id_input_text" name="nm_input_text" />    
      <input type="submit" id="id_submit" name="nm_submit" value="提交" />    
  </form>    
      
  <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>    
      
  </body>    
  </html>  
技术分享图片

方案二

技术分享图片
 <html>    
  <body>    
      
  <form action="/api/user/register" method="post" id="registSubmit" >    
      <input type="text" id="id_input_text" name="nm_input_text" />    
      <input type="submit" id="id_submit" name="nm_submit" value="提交" />    
  </form>         
  </body>    
  </html>  
技术分享图片
技术分享图片
$(‘#registSubmit‘).on(‘submit‘, function(){
      registPost()
event.preventDefault() //阻止form表单默认提交
})
function registPost () {     
   $.ajax({
       type: "post",
       url: "/api/user/register",
       data: $(‘#registSubmit‘).serialize(),
   }).success(function(message) {
     console.log(message)
   }).fail(function(err){
     console.log(err)
   })
    /*
     或者用jquery.form.min.js提交
     $(‘#registSubmit‘).ajaxSubmit(function(message){
        console.log(message);
     })
     */
}
技术分享图片

form表单submit按钮提交页面不跳转

标签:bsp   code   target   post   NPU   iframe   body   方案   $.ajax   

原文地址:https://www.cnblogs.com/zhangruisoldier/p/9166497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!