$.ajax()方法进行网页间传值操作

最新推荐文章于 2018-05-07 08:42:15 发布

原创最新推荐文章于 2018-05-07 08:42:15 发布 · 862 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

知识总结专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery库中的$.ajax()方法实现网页表单的异步提交功能，并展示了具体的HTML页面结构及JavaScript代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- ajaxtest.jsp -->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript" language="javascript" src="jquery.js"></script>   <!-- 必须包含 jquery.js文件，否则将无法传值-->
<head>
<script type="text/javascript">
	function fun(){
	var ss;
	var radio1=document.getElementsByName("radio1");  //读取单选按钮的值
	for(var i=0;i<radio1.length;i++){
	   if(radio1.item(i).checked){
	       ss=radio1.item(i).value;
	       break;
	   }
	}
//	var sendstr="sendstr1="+form1.text1.value+"&sendstr2="+ss;   
 alert( $("#text1").val()); 	
	$.ajax({
        type:"POST",
        url: "ajaxtest2.jsp",
        async:false,
//      data:sendstr,     //也可以用注释的这方式来进行传值操作
        data:{sendstr1:form1.text1.value,sendstr2:ss},   //也可以用 $("#text1").val()的方式读取text1中的元素值
        success:function(data){
				alert(data);
 		}
	});
}
</script>
</head>
<body>
<div align="center">
<form id="form1" name="form1" action="" method="post" >
输入：<input type="text" name="text1" id="text1"><br>
金球：<input type="radio" name="radio1"  value="梅西">梅西
    <input type="radio" name="radio1"  value="C罗">C罗<br>
<input type="button" value="提交" onclick="fun()">		
</form>
</div> 
</body>
</html>

<!-- ajaxtest2.jsp -->
<%@ page contentType="text/html;charset=utf-8"%>
<% 
   request.setCharacterEncoding("utf-8");
   String sendstr1=request.getParameter("sendstr1");
   String sendstr2=request.getParameter("sendstr2");
    String sReturn=sendstr1+"_new_"+sendstr2;
   %> 
<%=sReturn%>

JQuery中$.ajax()方法参数详解问百度或Google