百度一下的简单实现AJAX&JSON

先看结果，就是出现一个像百度一下自动提示的功能。但是选择某个后就对应搜索某个内容没实现，主要是实现前端和服务器交互。

实现的主要是我也不知道是不是局部刷新的功能。

就是当你执行某些操作时，前端页面能主动和后端交互。先从问题说起。

1.js中输入的时候的事件是？

keyup();

2.js与后台如何交互，怎样实现局部刷新？

<script type="text/javascript">
    //搜索框的键入事件
    $("#text").keyup(function(){
        var obj = $(this);
        var name = $("#text").val();
        $.ajax({

            type:'post',//url的请求方式
            url:'/practiceinterface/searchCustomer',//url的请求链接
            data:{name:name},//传入url的参数
            dataType:'json',//返回数据的数据类型
            success:function(data){//data为url响应回来的数据
                var responsehtml='';
                for (var i = 0; i < data.length; i++) {
                    //把响应过来的json数据放HTML中显示
                    responsehtml=responsehtml+"<li>"+data[i].name+"</li>";
                }
                $("#tips").show();
                //把数据呈现在HTML
                $("#tips").html(responsehtml);
            }
        });
    });
</script>

利用ajax和后台交互，利用键入事件得到动态搜索的效果。

3.url请求链接怎么写？

我是用的：/工程发布名/servlet请求url名，我直接用/url请求名给我报找不到路径错。

4.接口如何把响应数据封装成json传递？

扫描二维码关注公众号，回复： 9547485 查看本文章

利用JSON工具包（封装好的jar包，网上去下），当然也可以直接传递，前提是数据少的时候。

5.java对象转json？

 //customer是个java对象
 JSONObject jsoncustomer=JSONObject.fromObject(customer);
 resp.getWriter().write(jsoncustomer.toString());

6.json字符串转java对象？

 //result代表json字符串 注意：Customer一定要有无参构造方法
 JSONObject jsoncustomer=JSONObject.fromObject(result);
 Customer customer= (Customer) JSONObject.toBean(jsoncustomer, Customer.class);

7.java中如何把两个json字符串合成一个json字符串？

//putAll()
JSONObject jsoncustomer=JSONObject.fromObject(customer);
JSONObject jsoncustomer1=new JSONObject();
jsoncustomer1.put("age",20);
JSONObject jsoncustomer2=new JSONObject();
jsoncustomer2.putAll(jsoncustomer);
jsoncustomer2.putAll(jsoncustomer1);

8.jdbc连接oracle数据库？

需要ojdbcjar包.

9.如何把一个集合对象转json？

JSONArray.fromObject(customerlist).toString()

10.粘代码

前端界面：baidusearch.jsp

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>just like baidu search</title>
</head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<body>
<div class="content" style="width:800px;height:500px;margin:0px auto;">
    <!--
        文本输入框
    -->
    <div id="serach" style="background:green;">
        <input type="text" name="text" id="text" />
        <input type="submit" value="搜索" />
    </div>

    <!--
        提示下拉框
    -->
    <div id="tips" style="display: none;
                width: 171px;  border: 1px solid pink";>
        <ul id="searchvalue">
        </ul>
    </div>


</div>
</body>

<script type="text/javascript">
    //搜索框的键入事件
    $("#text").keyup(function(){
        var obj = $(this);
        var name = $("#text").val();
        $.ajax({

            type:'post',//url的请求方式
            url:'/practiceinterface/searchCustomer',//url的请求链接
            data:{name:name},//传入url的参数
            dataType:'json',//返回数据的数据类型
            success:function(data){//data为url响应回来的数据
                var responsehtml='';
                for (var i = 0; i < data.length; i++) {
                    //把响应过来的json数据放HTML中显示
                    responsehtml=responsehtml+"<li>"+data[i].name+"</li>";
                }
                $("#tips").show();
                //把数据呈现在HTML
                $("#tips").html(responsehtml);
            }
        });
    });
</script>

</html>

后端web.xml配置：

    <servlet>
        <servlet-name>searchServlet</servlet-name>
        <servlet-class>com.prainter.servlet.searchServlet</servlet-class>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>searchServlet</servlet-name>
        <url-pattern>/searchCustomer</url-pattern>
    </servlet-mapping>

后端对应servlet类的实现：

package com.prainter.servlet;

import com.prainter.example.Customer;
import com.prainter.tool.JDBCOracle;
import net.sf.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;

public class searchServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应编码格式，防止乱码
        req.setCharacterEncoding("UTF-8");
        JDBCOracle jdbcOracle=new JDBCOracle();

        //获取前端接收过来的参数
        String name=req.getParameter("name");

        //从数据库查询出满足前端条件的数据
        ArrayList<Customer> customerlist=jdbcOracle.selectCustomer(name);

        //设置响应编码格式，防止乱码
        resp.setContentType("text/html;charset=UTF-8");

        System.out.println(JSONArray.fromObject(customerlist).toString());

        //把数据响应出去
        resp.getWriter().write(JSONArray.fromObject(customerlist).toString());

    }
}

对应的jdbc类的实现：

package com.prainter.tool;

import com.prainter.example.Customer;

import java.sql.*;
import java.util.ArrayList;

public class JDBCOracle {
    //获得oracle数据库连接
    public static Connection getConnection(){
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            String url="jdbc:oracle:thin:@localhost:1521:ORCL";//最后那个数据库名
            String username="zhouyajuan";
            String password="zhouyajuan";
            Connection connection=DriverManager.getConnection(url,username,password);
            return connection;
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }





    //给数据库添加数据
    public void AddData(String id,String Name, int age) {
        Connection connection = getConnection();
        String sql = "select count(*) from customer where 1 = 1";
        String sqlStr = "insert into customer values(?,?,?)";
        int count = 0;

        try {
            PreparedStatement pstm = connection.prepareStatement(sql);
            ResultSet rs = pstm.executeQuery();
            while (rs.next()) {
                count = rs.getInt(1) + 1;
                System.out.println(rs.getInt(1));
            }
            // 执行插入数据操作
            pstm = connection.prepareStatement(sqlStr);
            pstm.setString(1, id);
            pstm.setString(2, Name);
            pstm.setInt(3, age);
            pstm.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {

        }
    }





    //模糊查询数据库数据
    public ArrayList<Customer> selectCustomer(String name) {
        Connection connection = getConnection();
        String sql = "select * from customer where name like ?";
        ArrayList<Customer> customerlist=new ArrayList<Customer>();
        try {
            // 计算数据库student表中数据总数
            PreparedStatement pstm = connection.prepareStatement(sql);
            pstm.setString(1, "%"+name+"%");
            ResultSet rs = pstm.executeQuery();
            Customer customer=null;
            while (rs.next()) {
                 customer= new Customer(
                        rs.getString(1),
                        rs.getString(2),
                        rs.getInt(3)
                );
               customerlist.add(customer);
            }
            return  customerlist;
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {

            //ReleaseResource();
        }
        return null;
    }

}

对应的实体类的实现：

package com.prainter.example;

public class Customer {
    private String id;
    private String name;
    private int age;
    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Customer(String id,String name) {
        this.id = id;
        this.name=name;
    }

    public Customer(String id,String name,int age) {
        this.id = id;
        this.name=name;
        this.age=age;
    }
}

粥粥_zyj

发布了56 篇原创文章 · 获赞 18 · 访问量 1万+

私信关注

百度一下的简单实现AJAX&JSON

猜你喜欢