前端笔记-通过jQuery获取input数据及html中name的使用
生活随笔
收集整理的這篇文章主要介紹了
前端笔记-通过jQuery获取input数据及html中name的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在前端開發中，使用表單會進行跳轉，有時候并不需要這個的。這里通過jQuery，使用AJAX直接發送Json數據。
運行截圖如下：
界面如下：
這里可以看到
div里面是group1，然后后面都是input1,input2等等。
并且有一個group2
name和上面group1一樣。
通過這種方式，獲取，如下，group1下的input[name=input1]的值，等等。
在index.html下面
可以知道先加載jquery.min.js，再加載test.js
而加載到test.js
但界面加載完成。就運行init()，這個init中調用了綁定函數，綁定了2個按鈕。
程序源碼如下：
index.html
<html> <head> <title>Test</title> </head><body> <div class="group1"><label >名稱1_1</label><input type="text" name="input1"></input><br/><label>名稱1_2</label><input type="text" name="input2"></input><br/><label>名稱1_3</label><input type="text" name="input3"></input><br/><label>名稱1_4</label><input type="text" name="input4"></input><br/><button class="do-btn1">點擊</button> </div> <br/> <br/> <div class="group2"><label>名稱2_1</label><input type="text" name="input1"></input><br/><label>名稱2_2</label><input type="text" name="input2"></input><br/><label>名稱2_3</label><input type="text" name="input3"></input><br/><label>名稱2_4</label><input type="text" name="input4"></input><br/><button class="do-btn2">點擊</button> </div> </body><script src="jquery.min.js"></script> <script src= "test.js"></script></html>test.js
;var member_do1 = {init: function(){this.eventBind();},eventBind:function(){$(".group1 .do-btn1").click(function(){$.ajax({url: "https://www.baidu.com",type: "POST",data:{value1:$(".group1 input[name=input1]").val(),value2:$(".group1 input[name=input2]").val(),value3:$(".group1 input[name=input3]").val(),value4:$(".group1 input[name=input4]").val()},dataType:'json',success:function(res){console.log(res);}});})} };$(document).ready(function(){member_do1.init();member_do2.init(); });var member_do2 = {init: function(){this.eventBind();},eventBind:function(){$(".group2 .do-btn2").click(function(){$.ajax({url: "https://www.baidu.com",type: "POST",data:{value1:$(".group2 input[name=input1]").val(),value2:$(".group2 input[name=input2]").val(),value3:$(".group2 input[name=input3]").val(),value4:$(".group2 input[name=input4]").val()},dataType:'json',success:function(res){console.log(res);}});});} };?
總結
以上是生活随笔為你收集整理的前端笔记-通过jQuery获取input数据及html中name的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kafka笔记-kafka外网搭建及构建
- 下一篇： Java工作笔记-使用Maven创建Sp