Two ways to implement ajax form submission with jquery

Method 1:

Obtain the required data elements separately. The outer layer of the DOM structure does not need to include the form tag (suitable for small amounts of data and data elements scattered throughout the 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){
   }
   });

Method 2:

Need to wrap the form tag (suitable for large amounts of data and concentrated elements)

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

html code:

The above is the detailed content of Two ways to implement ajax form submission with jquery. For more information, please follow other related articles on the PHP Chinese website!