Organize the documents and search out a jquery splicing ajax json and string splicing code. This article mainly introduces the jquery splicing ajax json and string splicing method. Here is a detailed code. Friends who need it can For reference.
jQuery splices the string ajax
<form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script> (function($){ $.fn.serializeJson=function(){ var serializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.name]=this.value; }); return serializeObj; }; $('#myForm').bind('submit',function(e){ console.log($(this).serializeJson()) }) })(jQuery) </script>
or directly serializes it using $("#formid").serialize(). . .
The above plug-in cannot be applied to input controls with multiple values, such as check boxes and multi-select selects. Next, I will further modify the plug-in to support multiple selections. The code is as follows:
Js code
(function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; })(jQuery);
Here, I encapsulate the multi-select value into a numerical value for processing. If you need to encapsulate the multi-select value into a string connected by "," or other forms when using it, please modify the corresponding code yourself.
The test is as follows:
Form:
Html code
<form id=”myForm” action=”#”> <input name=”name”/> <input name=”age”/> <select multiple=”multiple” name=”interest” size=”2″> <option value =”interest1″>interest1</option> <option value =”interest2″>interest2</option> <option value=”interest3″>interest3</option> <option value=”interest4″>interest4</option> </select> <input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike <input type=”checkbox” name=”vehicle” value=”Car” /> I have a car <input type=”submit”/> </form>
Test result:
{age: "aa", interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}
<form id="myForm" action="#"> <input name="name" value="111"/> <input name="age" value="2222"/> <button type="submit">tijiao</button> </form> </body> <script src="../js/jquery-1.11.0.min.js"></script> <script> var dataId = $("#myForm input").map(function (){ // return($(this).attr("id")); return($(this).attr("name")+'='+$(this).val()); }).get().join("&"); alert(dataId); </script>
Related recommendations:
vue syntax Detailed explanation of string splicing
How to use ajax to dynamically splice html code
How to implement variable and string splicing in vue
Source of this article: https://blog.csdn.net/lunhui1994_/article/details/54911845
The above is the detailed content of How to splice ajax json and string using jquery. For more information, please follow other related articles on the PHP Chinese website!