Ajax实现--取值追加到页面
Posted Jason–json
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax实现--取值追加到页面相关的知识,希望对你有一定的参考价值。
目的:将从数据库取到的值,放入下拉框标签中
步骤:
1.发送Ajax求情到后台;
2.取到值;
3.遍历循环;
4.追加节点。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script> <title>JQuery 使用Ajax</title> </head> <script> $(function () { $.get( "getUserAllServlet", {}, function (data) { //1.获取select标签结点 var select = $("sel"); //2.便利json数组 $(data).each(function () { //3.创建option var option="<option name=‘"+this.id+"‘>"+this.name+"</option>"; //4.调用select标签结点,追加option结点 select.append(option); }) } ) }) </script> <body> <select id="sel"> <option>--请选择--</option> </select> </body> </html>
以上是关于Ajax实现--取值追加到页面的主要内容,如果未能解决你的问题,请参考以下文章
html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。