美文网首页
ajax提交表单小记

ajax提交表单小记

作者: pysasuke | 来源:发表于2017-05-17 17:30 被阅读0次
<%--<input type="submit" class="button" id="button" value="Send Message">--%>
<input type="button" class="button" id="button" value="Send Message">

使用ajax提交表单,submit类型不支持click事件,需要改成button类型,并绑定click事件,进行ajax提交

<%--<form class="contact-form" action="/blog/test.do" method="get">--%>
<form class="contact-form" id="contact-form">

设置id,方便用id取到表单,并进行序列化

$('#button').click(function (callback) {  
   alert(1);    //contact-form
 var formParam = $("#contact-form").serialize();//序列化表格内容为字串   
 $.ajax({     
   type:'get',        
   url:'blog/test.do',       
   data:formParam,       
   cache:false,      
   dataType:'json',       
   success:function(data){     
   }  
  });
});
//新增
$('#button').click(function () {   
   alert(1);    //contact-form    
 var formParam = $("#contact-form").serialize();//序列化表格内容为字符串    
 $.ajax({      
   type: 'post',       
   url: 'blog/test.do',      
   data: formParam,        
   cache: false,        
   // dataType:'json',     
   success: function () {
           alert(2);        
     },       
   error: function () {            
           alert(3);        
   }    
 });
});

使用json数据类型,能成功请求到url,但是执行的是error方法,不设置则执行success方法

JS文件中引用JS文件

document.write("<script src='/js/jQuery.cookie.js'><\/script>"); 
//document.write("<script src='/js/jquery.cookie.js'></script>");

相关文章

网友评论

      本文标题: ajax提交表单小记

      本文链接:https://www.haomeiwen.com/subject/aendxxtx.html