69期-Java SE-052_AJAX-2 - HiJackykun

### Ajax

```js
$.ajax({
url:
type:
data:
dataType:
success:
error:
complete:
})

$.ajax({
  url:"/ajax.do",
  type:"POST",
  data:{
    id:1,
    name:"zhangsan"
  },
  dataType:"text",
  success:function(data){
    alert(data);
  }
});
```



- 动态验证用户名是否存在。

```jsp
<%--
  Created by IntelliJ IDEA.
  User: southwind
  Date: 2019-07-23
  Time: 21:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var flag = false;

            $("#name").blur(function(){
                var name = $(this).val();
                $.ajax({
                    url:"/login.do",
                    type:"POST",
                    data:"name="+name,
                    dataType:"text",
                    success:function (data) {
                        if(data == "true"){
                            flag = true;
                            $("#mess").html("<font color='green'>用户名存在</font>");
                        }
                        if(data == "false"){
                            flag = false;
                            $("#mess").html("<font color='red'>用户不存在！</font>");
                        }
                    }
                });
            });

            $("#btn").click(function(){
                if(flag){
                    $("form").submit();
                }
            });
        });
    </script>
</head>
<body>
    <form action="">
        用户名:<input type="text" name="name" id="name"/><span id="mess"></span><br/>
        密码:<input type="password" name="password" id="password"/><br/>
        <input id="btn" type="button" value="登录"/>
    </form>
</body>
</html>
```

```java
package com.southwind.controller;

import com.southwind.util.JDBCTools;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        Connection connection = JDBCTools.getConn();
        String sql = "select * from t_user where username = ?";
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        String flag = "false";
        try {
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,name);
            resultSet = preparedStatement.executeQuery();
            if(resultSet.next()){
                flag = "true";
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JDBCTools.release(connection,preparedStatement,resultSet);
        }
        resp.getWriter().write(flag);
    }
}
```

- select 框三级联动。

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: southwind
  Date: 2019-07-23
  Time: 20:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $.ajax({
          url:"/ajax.do",
          type:"POST",
          dataType:"JSON",
          success:function(data){
            alert(data[0].id+"-"+data[0].name+"-"+data[0].age);
          }
        });
      });
    </script>
  </head>
  <body>
  <h1 id="id"></h1>
  <h1 id="name"></h1>
  <h1 id="age"></h1>
  </body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: southwind
  Date: 2019-07-23
  Time: 21:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript"> 
        $(function(){
            var flag = false;

            $("#name").blur(function(){
                var name = $(this).val();
                $.ajax({
                    url:"/login.do",
                    type:"POST",
                    data:"name="+name,
                    dataType:"text",
                    success:function (data) {
                        if(data == "true"){
                            flag = true;
                            $("#mess").html("<font color='green'>用户名存在</font>");
                        }
                        if(data == "false"){
                            flag = false;
                            $("#mess").html("<font color='red'>用户不存在！</font>");
                        }
                    }
                });
            });

            $("#btn").click(function(){
                if(flag){
                    $("form").submit();
                }
            });
        });
    </script>
</head>
<body>
    <form action="">
        用户名:<input type="text" name="name" id="name"/><span id="mess"></span><br/>
        密码:<input type="password" name="password" id="password"/><br/>
        <input id="btn" type="button" value="登录"/>
    </form>
</body>
</html>

web.xml

/lib/...

c3p0-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>

    <named-config name="testc3p0">
        
        <!-- 指定连接数据源的基本属性 -->
        <property name="user">root</property>
        <property name="password">root</property>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/test?useUnicode=true&amp;characterEncoding=UTF-8</property>
        
        <!-- 若数据库中连接数不足时, 一次向数据库服务器申请多少个连接 -->
        <property name="acquireIncrement">5</property>
        <!-- 初始化数据库连接池时连接的数量 -->
        <property name="initialPoolSize">5</property>
        <!-- 数据库连接池中的最小的数据库连接数 -->
        <property name="minPoolSize">5</property>
        <!-- 数据库连接池中的最大的数据库连接数 -->
        <property name="maxPoolSize">10</property>
    
    </named-config>
        
</c3p0-config>

AjaxServlet.java

package com.southwind.controller;

import com.southwind.entity.User;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

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

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("UTF-8");
//        List<User> list = new ArrayList<>();
        User user = new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(22);
//        list.add(user);
//        user = new User();
//        user.setId(2);
//        user.setName("李四");
//        user.setAge(22);
//        list.add(user);
//        user = new User();
//        user.setId(3);
//        user.setName("王五");
//        user.setAge(22);
//        list.add(user);

//        JSONObject jsonObject = JSONObject.fromObject(list);
        JSONArray jsonArray = JSONArray.fromObject(user);
        resp.getWriter().write(jsonArray.toString());
    }
}

LoginServlet.java

package com.southwind.controller;

import com.southwind.util.JDBCTools;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        Connection connection = JDBCTools.getConn();
        String sql = "select * from t_user where username = ?";
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        String flag = "false";
        try {
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,name);
            resultSet = preparedStatement.executeQuery();
            if(resultSet.next()){
                flag = "true";
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JDBCTools.release(connection,preparedStatement,resultSet);
        }
        resp.getWriter().write(flag);
    }
}

entity.java

package com.southwind.entity;

public class User {
    private Integer id;
    private String name;
    private Integer age;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

}

JDBCTools.java

package com.southwind.util;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class JDBCTools {
    private static DataSource dataSource;
    static {
        dataSource = new ComboPooledDataSource("testc3p0");
    }

    public static Connection getConn(){
        Connection connection = null;
        try {
            connection = dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

    public static void release(Connection connection, Statement statement, ResultSet resultSet){
        try {
            if(connection!=null){
                connection.close();
            }
            if(statement!=null){
                statement.close();
            }
            if(resultSet!=null){
                resultSet.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

posted on 2019-09-17 07:18 HiJackykun 阅读(283) 评论(0) 编辑收藏举报

刷新页面返回顶部