您的位置：首页 > Web前端 > JQuery

Ajax（jquery）入门程序二--------仿百度提示

2018-10-24 15:42 323 查看
  • 前端界面实现：
[code]<%@ 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=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//捕获键盘弹起事件
$("#word").keyup(function() {
//1. 获取输入框的值
//var word = $("#word").val();
//this  对应就是执行这个方法的那个对象， $("#word")
var word = $(this).val();

if(word == ""){
$("#div01").hide();
}else{
//3. ajax请求数据(key-value)
$.post("find/allwords.mvc",{word:word} ,function(data , status){
alert(data);
$("#div01").show();
$("#div01").html(data);
});
}

})
});
</script>
<body>
<center>
<h2>百度</h2>
<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
<input type="button" value="百度一下"  style="height: 55px ; width: 100px ; ">

<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
</center>
</body>
</html>
  •  服务器端实现：这里使用的是servlet，也可以使用其他框架。只给出了controller层的实现，service和dao层的实现省略
[code]protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
try {
//1. 先获取参数
String word = request.getParameter("word");
System.out.println("word="+word);

//2. 让dao执行查询
WordsDao dao = new WordsDaoImpl();
List<WordBean> list = dao.findWords(word);

for (WordBean wordBean : list) {
System.out.println("==="+wordBean.toString());
}

request.setAttribute("list", list);
response.setContentType("text/html;charset=utf-8");
//3. 返回数据：填充数据到搜索提示框然后将list.jsp进行返回
request.getRequestDispatcher("list.jsp").forward(request, response);
} catch (SQLException e) {
e.printStackTrace();
}

}
  • 搜索提示框：list.jsp 
[code]<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<table style="width: 100%">
<c:forEach items="${list }" var="wordBean">
<tr>
<td>${wordBean.words}</td>
</tr>
</c:forEach>
</table>
  • 数据库 设计

  • 效果截图：

                                                 jQuery Ajax学习笔记：

    通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。【注意：get()方法不可以带参，而post()方法可以在请求中带参】
前提：必须导入jquery的支持！

一、jQuery $.post() 方法：

  • ·语法:$.post(URL,data,callback); 
  • ·例如：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

  • ·解析：

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 url）一起发送数据。
"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

（2）jQuery $.get() 方法：

  • ·语法：

$.get(URL,callback);

  • ·例如：

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

  • ·解析：

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
（3） 这个PHP文件 ("demo_test.php") 类似这样：
<?php
echo '这是个从PHP文件中读取的数据。';
?>
（4）jQuery load() 方法：

  • ·load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
  • ·例如：$("#div1").load("demo_test.txt");
  • ·解析：把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航