Jquery submits the concrete implementation of the Form Form via Ajax

  • 2020-03-26 23:50:22
  • OfStack

Today I just saw the ajax method of Jquery to submit data to the server.

Save the data to the server and display the information on success.
JQuery code:
 
$.ajax({ 
type: "POST", 
url: "some.php", 
data: "name=John&location=Boston", 
success: function(msg){ 
alert( "Data Saved: " + msg ); 
} 
}); 

Then I thought, is there any way I can submit the form? Var demo=$("#divname").val(); .
Later, today, I saw a method, is. Map, made an idea, you can learn from yo;
The HTML code is as follows, next I need to submit all the input data with the Form id dlg_form,
 
<form id="dlg_form" method="post"> 
<div class="fitem"> 
<label>  The room :</label> 
<input name="RoomName" style="padding: 2px; width: 135px; border: 1px solid #A4BED4;" required /> 
</div> 
<div class="fitem"> 
<label>  building :</label> 
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  department :</label> 
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<fieldset> 
<legend> 
<label> 
<input type="checkbox" id="ktkzq" name="ktkzq" value="ktkzq"/> 
 Air conditioning controller </label> 
</legend> 
<div class="fitem"> 
<label>  port :</label> 
<input name="kt_dk" id="kt_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  address :</label> 
<input name="kt_dz" id="kt_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  Way to work :</label> 
<input name="kt_gzfs" id="kt_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  Whether to enable :</label> 
<input name="kt_sfqy" id="kt_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</fieldset> 
<fieldset> 
<legend> 
<label> 
<input type="checkbox" id="dgkzq" name="dgkzq" value="dgkzq"/> 
 Light controller </label> 
</legend> 
<div class="fitem"> 
<label>  port :</label> 
<input name="dg_dk" id="dg_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  address :</label> 
<input name="dg_dz" id="dg_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  Way to work :</label> 
<input name="dg_gzfs" id="dg_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label>  Whether to enable :</label> 
<input name="dg_sfqy" id="dg_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</fieldset> 
<div class="fitem"> 
<label style=" width:100px;"> 
<input type="checkbox" id="zongbiao" name="zongbiao" value="zongbiao"/> 
 The master table is installed :</label> 
</div> 
<div class="fitem"> 
<label>  Total meter power node :</label> 
<input name="zbdnjd" id="zbdnjd" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</form> 

Is that a lot? If you had to write every input, would you vomit blood?
So let's look at my method, first of all let's take down all the names and values of the input,
Js code is as follows:
 
var str_data=$("#dlg_form input").map(function(){ 
return ($(this).attr("name")+'='+$(this).val()); 
}).get().join("&") ; 
alert(data); 

Ps: if you alert, you will find that the schema in this case is divname=xxx&divname2= XXXX, etc.

Then look back at the ajax submissions:
The same code at the page code block index 0
Have you noticed that we can just put what we got up there into data?

The complete code, after modification should be
 
$.ajax({ 

var str_data=$("#dlg_form input").map(function(){ 
return ($(this).attr("name")+'='+$(this).val()); 
}).get().join("&") ; 
type: "POST", 
url: "some.php", 
data: str_data, 
success: function(msg){ 
alert( "Data Saved: " + msg ); 
} 
}); 

Ok, it's as simple as that. You can use it if you want.

Ha ha.

If you have any questions, please feel free to ask.

Related articles: