Maison > interface Web > js tutoriel > Deux façons d'implémenter la soumission de formulaire ajax à l'aide de jquery

Deux façons d'implémenter la soumission de formulaire ajax à l'aide de jquery

零下一度
Libérer: 2017-06-29 10:08:59
original
1648 Les gens l'ont consulté

Méthode 1 :

Obtenez les éléments de données requis séparément. La couche externe de la structure DOM n'a pas besoin d'inclure des balises de formulaire (adaptées aux petites quantités de données et d'éléments de données dispersés dans la page)

$.ajax({
  type: 'POST',
   url:'',
   data: {
        residence:[$('#region_1').val(),$('#region_2').val(),$('#region_3').val()],
        address:$('#address').val()
   },
   dataType: 'json',
   success: function(data){
   },
   error:function(err){
   }
   });
Copier après la connexion

Méthode 2 :

doit être enveloppé avec des balises de formulaire (adaptées aux grandes quantités de données et aux éléments concentrés)

function AddHandlingFeeToRefund()
        {var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";       
            alert($('#formAddHandlingFee').serialize());
                $.ajax({
                    type: "POST",
                    dataType: "html",
                    url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()),
                    data: $('#formAddHandlingFee').serialize(),
                    success: function (result) {var strresult=result;
                        alert(strresult);//加载最大可退金额$("#spanMaxAmount").html(strresult);
                    },
                    error: function(data) {
                        alert("error:"+data.responseText);
                     }
                });
        }
Copier après la connexion

Code HTML :

<form id="formAddHandlingFee" name="formAddHandlingFee" 
enctype="multipart/form-data" onsubmit="AddHandlingFeeToRefund()">
<table id="AddHandlingFee" class="Wfill">
<tr><td><asp:Literal ID="UI_Amount" runat="server" Text="处理费用" meta:resourcekey="HandlingFeeAmount" />
</td><td><input type="text" id="txtHandlingFeeAmount" name="txtHandlingFeeAmount"  
class="{required:true,number:true}" maxlength="12" />
</td></tr><tr><td>
<asp:Literal ID="UI_HandlingFeeType" runat="server" Text="费用类型" meta:resourcekey="HandlingFeeHandlingFeeType" />
</td><td><crmweb:HtmlSelectControl ID="HandlingFeeType" EnumTypeName="DX.OMS.Model.Common.HandlingFeeType,DX.OMS.Model.Common" EmptyValue="" EmptyText="Select" runat="server" class="text {required:true}"/>
</td></tr><tr><td><asp:Literal ID="UI_Notes" runat="server" Text="备注" meta:resourcekey="HandlingFeeNotes" /></td><td><textarea id="txtNotes" name="txtNotes" class="text {required:true}" 
cols="22" rows="2" maxlength="100"></textarea></td></tr><tr><td></td><td><input id="Submit1" type="submit" value="添加处理费"  />
<asp:Button ID="Button1"  runat="server" Text="添加处理费" OnClientClick="javascript:AddHandlingFeeToRefund()" /></td></tr></table>
</form>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal