Ajax 简单的实例代码

最新推荐文章于 2025-04-08 23:03:28 发布

firstcode666

最新推荐文章于 2025-04-08 23:03:28 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： ajax jquery javascript

本文链接：https://blog.youkuaiyun.com/firstcode666/article/details/120663541

版权

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文提供了一个使用jQuery进行Ajax请求的简单实例，包括前端和后端的代码实现，帮助理解Ajax在实际应用中的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
  <script type="text/javascript" src="jquery.js"></script>
    <style>
        h2
        {
            text-align: center;
        }

        .item
        {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div style="text-align: center">
  <div>
    <div>
      <label style="text-align: right; display: inline-block; width: 150px;">用户名</label>
      <input name="username" id="username">
    </div>
    <div>
      <label style="text-align: right; display: inline-block; width: 150px;">密码</label>
      <input type="password" name="password" id="password">
    </div>

    <button onclick="register(this)">注册</button>
  </div>
</div>

<script type="text/javascript">
  function register(obj)
  {
    let username = $("#username").val();
    let password = $("#password").val();


    $.ajax({
      type: "POST",
      url: "register.php",
      data: {
        'username': username,
        'password': password
      },
      success:function(data) {

        let obj = eval('(' + data + ')');
        if (1 == obj.status)
        {
          alert('注册成功');
          window.location.href="login.html";
        }else
        {
          alert("注册失败");
        }
      }
    })
  }
</script>
</body>
</html>

后端代码实现：

<?php

$username = $_POST['username'];
$password = $_POST['password'];

$pdo = new PDO("mysql:host=127.0.0.1;dbname=fd","fd","fd");
$password = hash('sha256', $password, false);
$sql = 'insert into users(username,password) values("' . $username . '", "' . $password . '")';

if($pdo -> exec($sql)) {

    echo json_encode(['status' => 1, 'msg' => "success"]);

} else {
    echo $pdo->errorCode();
    print_r($pdo->errorInfo());
}