菜鳥教程 jsp教程
http://www.runoob.com/jsp/jsp-form-processing.html
var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 選中索引
var text = obj.options[index].text; // 選中文本
var value = obj.options[index].value; // 選中值
jQuery中獲得選中select值
第一種方式
$('#testSelect option:selected').text();//選中的文本
$('#testSelect option:selected') .val();//選中的值
$("#testSelect ").get(0).selectedIndex;//索引
第二種方式
$("#tesetSelect").find("option:selected").text();//選中的文本
…….val();
…….get(0).selectedIndex;
http://www.cnblogs.com/itdream/archive/2012/05/31/2528345.html
現在有一id=test的下拉框,怎麼拿到選中的那個值呢?
分別使用javascript原生的方法和jquery方法
<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一:javascript原生的方法
1:拿到select對象: var myselect=document.getElementById("test");
2:拿到選中項的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所選中項的index
3:拿到選中項options的value: myselect.options[index].value;
4:拿到選中項options的text: myselect.options[index].text;
二:jquery方法(前提是已經加載了jquery庫)
1:var options=$("#test option:selected"); //獲取選中的項
2:alert(options.val()); //拿到選中項的值
3:alert(options.text()); //拿到選中項的文本
http://blog.csdn.net/itmyhome1990/article/details/41849175
form表單提交的幾種方法
- <form id="myform" name="myform" method="post" onsubmit="return sumbitTest();"
- action="RegisterAction.action">
- <table>
- <tr>
- <td>姓名:</td>
- <td> <input type="text" name="name" /> </td>
- </tr>
- <tr>
- <td>性別:</td>
- <td>
- <input type="radio" name="sex" value="1"> 男
- <input type="radio" name="sex" value="0"> 女
- </td>
- </tr>
- <tr>
- <td>年齡:</td>
- <td>
- <select name="age">
- <option value="20">20</option>
- <option value="21">21</option>
- <option value="22">22</option>
- </select>
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <input type="submit" value="Submit普通提交">
- <input type="button" id="ajaxBtn" value="AJAX提交" />
- <input type="button" id="jqueryBtn" value="jQuery提交" />
- <input type="button" id="jsBtn" value="JS提交" />
- <input type="submit" value="onSubmit提交" />
- </td>
- </tr>
- </table>
- </form>
- <script type="text/javascript">
- $(function() {
- //ajax提交
- $("#ajaxBtn").click(function() {
- var params = $("#myform").serialize();
- $.ajax( {
- type : "POST",
- url : "RegisterAction.action",
- data : params,
- success : function(msg) {
- alert("success: " + msg);
- }
- });
- })
- //jQuery提交
- $("#jqueryBtn").click(function(){
- $("#myform").submit();
- })
- //js提交
- $("#jsBtn").click(function(){
- document.myform.action="RegisterAction.action";
- document.myform.submit();
- })
- })
- function sumbitTest(){
- return true; //return false則不會提交
- }
- </script>
Jquery ajax提交表單幾種方法詳解
[導讀] 在jquery中ajax提交表單有post與get方式,在使用get方式時我們可以直接使用ajax 序列化表單$( 表單ID) serialize();就行了,下面我來介紹兩個提交表單數據的方法。$get方式提交表單get() 方法通過遠程 HTTP
$get方式提交表單
get() 方法通過遠程 HTTP GET 請求載入信息
格式
$(selector).get(url,data,success(response,status,xhr),dataType)
請求 test.php 網頁,傳送2個參數,忽略返回值:
$.get("test.php", { name: "John", time: "2pm" } );
顯示 test.php 返回值(HTML 或 XML,取決於返回值):
代碼如下 | 複製代碼 |
$.get("test.php", function(data){ |
ajax 序列化表單
$.Form.serialize( NameValuePair )
虛擬一個表單,並設置表單控件名與值。
參數
NameValuePair
必選項。設置虛擬的表單控件。該參數形式爲:{ name1=value, name2=value2, ......}
返回值
虛擬表單序列化後的字符串,其格式如:username=%E5%95%8A%E8%94%A1&password=123456
代碼如下 | 複製代碼 |
<form> |
輸出標準的查詢字符串:
a=1&b;=2&c;=3&d;=4&e;=5
$POST方式提交表單
$.post
jQuery.post( url, [data], [callback], [type] ) :使用POST方式來進行異步請求
參數:
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給服務器的數據,以 Key/value 的鍵值對形式表示。
callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)。
代碼如下 | 複製代碼 |
$.post("momsg.php",{"tel":$("#username").val()},function(data){ |
通過 AJAX POST 請求改變 div 元素的文本:
代碼如下 | 複製代碼 |
$("input").keyup(function(){ |
實例
代碼如下 | 複製代碼 |
<script type="text/javascript"> //提交前觸發的事件 //這裏的countryid 可以動態從GridView裏面取 //調用Juqery Ajax var text=msg.split('<'); //當AJAX請求成功時添加一個被執行的方法 //清空文本里面的值 //獲取下拉菜單裏面的文本內容 |
java前後臺之間傳值的幾種方式
(2011-12-19 14:39:19)
|
分類: 工作那點事兒之技術 |
自己寫的代碼太少,有時候前後臺傳值還寫的不是很熟練,現在總結一下,加深下印象。
1.jquery的Ajax傳值
----》前臺到後臺
期望功能:把前臺用戶輸入的信息保存在數據庫裏。
前臺jsp代碼:
function saveUserInfo(){
var params = {};//定義一個數組
var userNO = jq("#userNO").val();//把前臺頁面上的值都賦予一個變量
var userName = jq("#userName").val();
var phoneNumber = jq("#phoneNumber").val();
params["userNO"] = userNO ;//把這些變量都存在這個數組裏
params["userName"] = userName;
params["phoneNumber"] = phoneNumber;
jq.ajax({
type : "post",
url : "<%=basePath%>personalSetting/personalSettingSaveAll.do",//找到action裏相應的方法
data : params, //把數組的值賦給data,把上面的param改爲data,這裏就能直接去掉
dataType : "text",//根據數據類型選擇text、jason等
success : function(data) {
alert(msg); //msg可以在後臺Action配置,也可以在這裏直接寫提示信息
},
error : function(data) {
alert("msg");
}
});
}
}
後臺Action代碼:
@SuppressWarnings({ "unchecked", "unused", "rawtypes" })
@RequestMapping(value = "/personalSetting/personalSettingSaveAll.do", method = RequestMethod.POST)
public void saveAll(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String userNO = request.getParameter("userNO")+"";
String userName = request.getParameter("userName")+"";
String phoneNumber = request.getParameter("phoneNumber")+"";
PersonalSettingEntity pSE = new PersonalSettingEntity();
if(!("".equals(userNO))||"".equals(userName )||"".equals(phoneNumber ))){ //如果都不爲空
pSE.setUserNO(userNO);
pSE.setUserName(userName);
pSE.setPhoneNumber(phoneNumber);
PersonSettingService.saveProcessSetting(pSE);
msg = "保存成功";
}else{
msg = "填寫不完整"; //可以在前臺校驗,這裏爲了舉例子
}
response.getWriter().print(msg); //這裏的msg是text數據,所以前臺數據類型是text。
}
----》後臺到前臺
期望功能:把數據庫裏的用戶信息顯示到前臺頁面。
後臺Action代碼:
@SuppressWarnings({ "unchecked", "unused", "rawtypes" })
@RequestMapping(value = "/personalSetting/personalSettingInitAll.do", method = RequestMethod.POST)
public void qureyAll(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String userId = request.getSession().getAttribute("currentUserId").toString();
PersonalSettingEntity pSE = PersonSettingService.getPersonalSetting(Long.valueOf(userId));
response.getWriter().print(JSONArray.fromObject(pSE).toString());
}
前臺jsp代碼:
function get(){
jq.ajax({
type : "post",
url : "<%=basePath%>personalSetting/personalSettingInitAll.do",
dataType : "json",
success :function (data) {
var bean;
jq.each(data,function(index){
bean = data[index];
jq("#userNO").attr("value",bean.userNO);
jq("#userName").attr("value",bean.userName);
jq("#phoneNumber").attr("value",bean.phoneNumber);
}
},
error :function (data){
alert("系統出錯!");
}
});
}
1.當輸入用戶名和密碼爲空的時候,需要判斷。這時候就用到了校驗用戶名和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。
方法一:
在jsp的前端頁面的頭部插入一個js方法:
function checkUser(){
var result = document.getElementById("userid").value;
var password = document.getElementById("userpassid").value;
if(result == "" ){
alert("用戶名不能爲空");
return false;
}
if(password == "" ){
alert("密碼不能爲空");
return false;
}else{
return true;
}
}
在form表單裏寫成這樣:
<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" >
<table width="100%" border="0">
<tr>
<td width="60" height="40" align="right">用戶名 </td>
<td><input type="text" value="" class="text2" name = "username" id = "userid"/></td>
</tr>
<tr>
<td width="60" height="40" align="right">密 碼 </td>
<td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td>
</tr>
<tr>
<td width="60" height="40" align="right"> </td>
<td><div class="c4">
<input type="submit" value="" class="btn2" />
方法二:
function checkUser(){
var result = document.getElementById("userid").value;
var password = document.getElementById("passid").value;
if(result == "" ){
alert("用戶名不能爲空");
return false;
}
if(password == "" ){
alert("密碼不能爲空");
return false;
}
document.getElementById("formid").submit();
}
form表格的寫法,需要寫id
<form id="formid" method = 'post' action = 'user_login_submit.action' >
button按鈕的寫法如下:
<input type="button" value="" class="btn2" onclick = "checkUser();" />
form提交的幾種方法
方法一:利用form的onsubmit()函數(經常使用)
- <script type="text/javascript">
- function validateForm(){
- if(document.reply.title.value == ""){ //通過form名來獲取form
- alert("please input the title!");
- document.reply.title.focus();
- return false;
- }
- if(document.forms[0].cont.value == ""){ //通過forms數組獲取form
- alert("please input the content!");
- document.reply.cont.focus();
- return false;
- }
- return true;
- }
- <form name="reply" method="post" onsubmit="return validateForm( );">
- <input type="text" name="title" size="80" /><br />
- <textarea name="cont" cols="80" rows="12"></textarea><br />
- <input type="submit" value="提交" >
- </form>
- 注意:
- 1.onsubmit屬性內容一定要有return關鍵字,否則函數會直接執行,不會返回
- 2.validateForm一定要返回一個boolean類型的返回值
- 3.提交按鈕要寫成submit類型的
方法二:利用input類型爲submit組件的onclick()函數
1.將上面form標籤中的onsubmit="return validateForm()"屬性,去掉。
2.爲“提交”按鈕添加onclick事件,如下:
<input type="submit" value="提交" onclick="return validateForm();">
方法三:利用button組件的onclick()函數,手動提交
- <script type="text/javascript">
- function modifyItem() {
- if (trim(document.getElementById("itemName").value) == "") {
- alert("物料名稱不能爲空!");
- document.getElementById("itemName").focus();
- return;
- }
- with (document.getElementById("itemForm")) {
- method = "post";
- action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
- submit();
- }
- }
- //返回
- function goBack() {
- window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
- }
- </script>
- <form name="itemForm" id="itemForm">
- <input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
- <input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
- <input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()">
- </form>
- 注意:
- 1.提交時,設置form的action和methods屬性,然後利用form.submit()函數提交。
總結:
1.對form中的組件驗證時,前兩個使用的是name屬性,包括form自身的。
2.如果提交表單時沒有反應,同時確定提交表單部分代碼沒有問題,請查看提交表單前面的js代碼,有時前面js的錯誤會引發莫名其妙的問題。