您现在的地位: 365体育备用网址 > 365学习 > ajax提交form表单方法汇总

ajax提交form表单方法汇总_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > 365学习 > ajax提交form表单方法汇总

ajax提交form表单方法汇总

文章来源:365jz.com     点击数:94    更新时间:2018-05-15 15:23   参与评论
常见的form表单提交方式

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">  
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>

点击登录按钮后,即触发form表单的提交事情,数据传输至后端,由后端操纵页面跳转和数据。

ajax实现form提交方式


修改完成后代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jQuery/2.1.4/jquery.min.js"></script>
    <script type="text/JavaScript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常!");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>

注意事项

在常用方式中,点击的登录按钮的type为"submit"类型;
在常用方式中,form的action不为空;
ajax方式中需要注意的是$.ajax方法中的参数:dataType和data。
我平时很少写前端代码,级别也就是入门级别,能看懂能改而已,所以很多时刻都是百度,像这次这个功能的实现也是借助了百度,但是,我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json",导致我在一开头调试的时刻一直报错,最终是改成了"json"才胜利,因此在这里特别说明并提醒一下,别和我一样走错了路,还有就是向服务端传输的data值了,像上面代码一样,将form表单中的数据序列化传输即可。

另外的方法:

提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处置结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处置,那么页面不能整体刷新,这时第一想到的就是采纳ajax的方式提交表单。下面完整的介绍一个表单采纳ajax方式提交的流程。

一、准备

1、页面引入jQuery文件

2、页面引入jQuery的表单插件jQuery.form.js

二、实施

1、页面中的表单

<form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information"> 
      <input type="text" name="UserName" value="" /> 
      <div class="jsrz_main_button"> 
                <input type="submit" value="提交" id="agreementSub"> 
        </div
</form


2、提交表单的代码

$("#agreementSub").on("click",function(){ 
       $('#mainForm').ajaxSubmit(      //ajax方式提交表单 
            { 
                url: '/personal/kaike', 
                type: 'post', 
                dataType: 'json', 
                beforeSubmit: function () {}, 
                success: function (data) { 
                    if (data.Res == "True" || data.Res == true) { 
                        $('.jsrz_main_check').html('您的申请已提交,我们将会在1-2个工作日内进行审核,请耐烦等候!'); 
                    } else { 
                        alert(data.Msg); 
                    } 
                }, 
                clearForm: false,//禁止清楚表单 
                resetForm: false //禁止重置表单 
            }); 
}); 


点击提交按钮触发绑定的click事情。

$('#mainForm').ajaxSubmit()//中的代码部分也能够封装为一个方法,在其余地方调用。 

三、不使用jQuery.from表单插件的方式

$("#maniForm").submit(function (envent) 

    envent.preventDefault(); 
     
    var form = $(this); 
    $.ajax({ 
        url: form.attr("action"), 
        type: form.attr("mathod"), 
        data: form.serialize(), 
        dataType: "json", 
        beforeSend: function () 
        { 
            $("#ajax-loader").show(); 
        }, 
        error: function () 
        { 
 
        }, 
        complete:function () { 
            $("#ajax-loader").hide(); 
        }, 
        success: function (data) 
        { 
            $("#article").html(data); 
        } 
    }); 
}); 


注:表单中必须有类型为submit的input按钮,用来激活submit方法。此种提交方式只能提交表单中比较简单的文本项,对于file类型的数据无法进行提交。input提交按钮的id和name属性的值不能为submit,否则会造成冲突而无法提交表单。

ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。
前几天,发现了一些小问题。我在写后台治理页面时,需要上传一张利澳娱乐 娱乐。于是我就用很一般的Form表单上传有一段Json串和利澳娱乐 娱乐文件;

Form表单上传利澳娱乐 娱乐只需要在<form>标签里加上enctype = 'multipart/form-data',这样是能够上传利澳娱乐 娱乐的;

但问题来了,在我进行用Form表单提交的时刻直接跳出来提交返回值的页面并且原先的页面刷新;

这样我们能够先到异步的Ajax能够实现局部刷新;

废话不多说了 直接上代码;

首先是html:

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">类型</td>
<td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">名称</td>
<td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">开头时间</td>
<td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">结束时间</td>
<td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">省</td>
<td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style="text-align: right;">市</td>
<td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">门店</td>
<td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">具体地址</td>
<td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
</table>
</form>
<form id = "form_sub" style = "font-size: 13px;">
<table style="font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">上传利澳娱乐 娱乐</td>
<td>:  <input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'选择上传利澳娱乐 娱乐',buttonText:' 选 择 '"></td>
<td><input type = 'text' id = "Item" name = 'item' style = "display:none;"></td>
</tr>
</table>
</form>
<p style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:'icon-ok'" href = "javascript:void(0)">
保留
</a>  
<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">
取消
</a>  
</p>

以上是html代码,为了方便大家copy,CSS直接在标签里了;

有很多朋友想问,365体育备用网址写两个form表单;

这是因为依据后台接收数据的需求,传的是信息变成字符串和利澳娱乐 娱乐;

首先把信息变成字符串;

再放到第二个Form表单里,细心地朋友发现在第二个form表单里<input>标签里style=“display:none”这是个隐藏的标签;

不错我是通过第一个form表单猎取的数据通过js变成字符串再放到隐藏的标签里;

这样通过Ajax提交第二个Form表单就能够了;

js代码:

$( '#sub' ).click( function () {
  var actTimeStart1 = $ ('#actstarttime') . datebox ('getValue');
  var actTimeStart = changeDateToLong(actTimeStart1);
  var actTimeEnd1 = $('#actendtime').datebox('getValue');
  var actTimeEnd = changeDateToLong(actTimeEnd1);
  if(actTimeStart != '' && actTimeEnd != '' && (actTimeStart - actTimeEnd > 0)){
    $.messager.alert('警告','结束时间不能小于开头时间!','error');
    return false;
  }
  else{
    if ($('#form_insert').form('validate')) {
      var actType = document.getElementById("acttype").value;
      var actName = document.getElementById("actname").value;
      var actArea = document.getElementById("actadd").value;
      var actTimeStart1 = $('#actstarttime').datebox('getValue');
      var actTimeStart = changeDateToLong(actTimeStart1);
      var actTimeEnd1 = $('#actendtime').datebox('getValue');
      var actTimeEnd = changeDateToLong(actTimeEnd1);
      var t2 = $('#mem_Shop').combobox('getValue');
      var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};
      var activityMemberJson = JSON.stringify(jsonObj);
      document.getElementById("Item").value=activityMemberJson;
      var form = new FormData(document.getElementById("form_sub"));
      $.ajax({
        url : ../activity/actionActivityInsert', //<a rel="nofollow" href="http://www.cnblogs.com/jayxxxxxxx/" target="_blank">http://www.cnblogs.com/jayxxxxxxx/</a>
        type : "post",
        data : form, //第二个Form表单的内容
        processData : false,
        contentType : false,
        error : function(request) {
        },
        success : function(data) {
          $('#box').datagrid('reload');
        }
      });
      window_open($('#insert_form'), 'close');
    }else {
      $.messager.alert('警告' , '信息不完整!' , 'error');
    }
  }
});

大家看到了我用了FormData方法,说真的这个在HTML5里实在是太好用了,上传利澳娱乐 娱乐都不用再写enctype = 'multipart/form-data';

如对本文有疑问,请提交到交流大杏彩客户端手机版娱乐官网,广大热心网友会为你解答!! 点击进入大杏彩客户端手机版娱乐官网


颁布评论 (94人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁颁布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换利澳娱乐 娱乐
最新评论
------分隔线----------------------------
条评论
Sitemap