Javaweb 学习---ajax应用（获取单选框，复选框的值）

最新推荐文章于 2023-11-13 14:48:43 发布

wxyjusoo

最新推荐文章于 2023-11-13 14:48:43 发布

阅读量1.4k

点赞数

文章标签： web java 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65054318/article/details/129561382

版权

首先，我们得知道什么是AJAX，

它是前后端交互的重要工具，是前后台交互能力的表现（即客户端给服务端发送学习的工具，以及接受响应的工具）。

它不是新的编程语言，而是一种使用现有标准的新方法。

是与服务器交互数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax编程在jQuery中进行了很好的封装，JQuery是优秀的JavaScript框架，它使开发者更方便进行jiavascript开发，下面介绍Ajax请求时使用最多的$.ajax()方法，通过它可以设置Ajax访问器的各种细节。

接下来我们通过实战来更好理解知识点

我先展示效果图（我们要做的就是输入姓名，性别以及专业，如何会将所选的信息显示在查询按钮的下面），主要的问题是如何获取单选框以及复选框的数据。

首先先创建aaa.html，这里要导入jquery-1.10.1.min.js包，其步骤为（右击项目下面的WebContent。。。。如下图所示），有需要这个包的可留言。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
    $("#btn").click(function(){
        var k1=$("#k1").val();
        var mf2 =$('input[name="sex"]:checked').val(); 
        var aac=document.getElementById("test");
        var index=test.selectedIndex;
        var mf=aac.options[index].value;
    
        $.ajax({
            "url":"bbb.jsp",        
             "type":"post",
            "data":{'k1':k1,'mf':mf ,'mf2':mf2},
             "success":function(data){                 
                 $("#result").html(data);
             }
        })
    })
})
</script>

</head>
<body>

<fieldset>
<legend>学生信息系统</legend>

<div>姓名:<input type="text" id="k1" placeholder="姓名"/></div>
<br/>
<br>

<div id="z">
性别：<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女" />女
</div>

<div>
<br />
<select id="test">
<option id="aaa" value="计算机与通信工程学院">计算机与通信工程学院</option>
<option id="ccc" value="自动化学院">自动化学院</option>
<option id="ddd" value="机械学院">机械学院</option>
<option id="eee" value="材料学院">材料学院</option>
<option id="fff" value="管理学院">管理学院</option>
</select>
</div>

<br/>
<div><input id="btn" type="button" value="查询"/>
</div>

<div>查询结果:<span id="result"></span></div>

</fieldset>
</body>
</html>

再接着创建bbb.js，代码如下，该代码实现的功能就是获取上面集中数据，便可以输出。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Insert title here</title>
</head>
<body>

<%

String k1=request.getParameter("k1");
String mf=request.getParameter("mf");  
String mf2=request.getParameter("mf2"); 
out.println(k1+" "+mf2+"  "+mf);
%>

</body>
</html>

总结：获取文本框数据我们用 1

获取单选按钮我们用3

获取复选框数据我们用567

var a=$("#a").val

var mf2 =$('input[name="sex"]:checked').val(); 

 var aac=document.getElementById("test");
        var index=test.selectedIndex;
        var mf=aac.options[index].value;

这次数据交互不用servlert，因此也不用地址映射了。servlet作为服务器端组件可以很方便的完成服务，但向客户端呈现结果时，却只能使用大量的out.print()输出HTML页面元素，代码繁琐且难于理解。

jsp时Java服务器端的页面技术，可以将servlet中负责输出的语句抽取出来，实现业务处理与结果展示的代码分离。

脚本即指嵌入到HTML中的Java代码，有三种形式