美文网首页
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