ajax学习笔记（二）

最新推荐文章于 2024-11-12 15:42:01 发布

王墨鱼

最新推荐文章于 2024-11-12 15:42:01 发布

阅读量89

点赞数

分类专栏： html css javascript 文章标签：大数据

本文链接：https://blog.csdn.net/m0_53737524/article/details/125486053

版权

html css javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

做一个连接数据库的验证

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax验证用户名</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        var myname = document.getElementById("myname");
        myname.onblur = function (){
            console.log("hello ,js!")
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var myspan = document.getElementById("myspan");
                        myspan.innerHTML = this.responseText;
                    }else {alert(this.status)}
                }
            }
            xhr.open("POST","/ajax/ajaxrequest04",true)
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xhr.send("name="+myname.value)

        }


    }
</script>
用户名<input type="text" id="myname">
<span id="myspan"></span>
</body>
</html>

后端

package com.wsy;

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.io.PrintWriter;
import java.sql.*;
@WebServlet("/ajaxrequest04")
public class AjaxDemo04 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//连接数据库，验证用户名是否存在
        String name = req.getParameter("name");
        Boolean flag = false;
        Connection conn =null;
        PreparedStatement ps =null;
        ResultSet rs =null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql//localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC","root","wsy");
            String sql = "select id,name from t_user where name = ?";
            ps = conn.prepareStatement(sql);
            System.out.println(sql);
            ps.setString(1, name);
            rs = ps.executeQuery();
            if (rs.next()) {
//                用户名已存在
                flag = true;
            }
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = resp.getWriter();
        if (flag) {
            writer.print("<font color=’red‘>对不起你的用户名已经存在</font>");
        }else{
            writer.print("<font color=’green‘>用户名可以正常使用</font>");
        }
    }
}

点击按钮显示学院的列表

回顾json

var jsonobj = {
        
        
            
            
            }

    var user = {
        "name" : "wsy",
        "age" : 18,
        "sex" : true
    }
    console.log(user.name)
    console.log(user.age)
    console.log(user.sex)

一、JSON的解析方法有两种：eval()和JSON.parse()

var jsonstr='{"str1":"Hello,", "str2":"world!"}';
var evalJson=eval('('+jsonstr+')');
var jsonParseJson=JSON.parse(jsonstr);

这样就把jsonstr这个json格式的字符串转换成了JSON对象。

二者的区别在于：JSON.parse()可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()可以解析任何字符串，eval()会执行字符串的代码，造成原先字符串的值改变，是不安全的。

二、JSON.parse(text [, reviver])语法

1、参数

text：必选。一个有效的 JSON 字符串。

reviver：可选。一个转换结果的函数，将为对象的每个成员调用此函数。

2、功能

JSON.parse(jsonstr)将格式完好的json字符串转换为json对象。所谓"格式完好"，就是要求jsonstr必须符合严格的JSON格式，例如：属性名称必须用双引号，字符串值也必须用双引号括起来，单引号写在{}外。

3、实例

var jsonstr='{"str1":"abc", "str2":"123"}';
var jsonobj=JSON.parse(jsonstr);
console.log(jsonobj);
运行结果如下：
Object
str1: "abc"
str2: "123"
__proto__: Object