ajax

Posted 2020-09-17 ChrissZhao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax相关的知识，希望对你有一定的参考价值。

一.检测用户名是否可用

<script src="jquery-3.2.0.min.js"></script>
</head>

<body>

<input type="text" id="uid" /><span id="ts"></span>

</body>
<script type="text/javascript">

$("#uid").blur(function(){
        //取出用户名
        var uid = $(this).val();
        
        //去数据库进行匹配
        $.ajax({
                url:"chuli.php", //处理页面的路径
                data:{u:uid}, //要提交的数据是一个JSON
                type:"POST", //提交方式
                dataType:"TEXT", //返回数据的类型
                //TEXT字符串 JSON返回JSON XML返回XML
                success:function(data){ //回调函数
                        if(data.trim()=="OK")
                        {
                            $("#ts").html("该用户名可用");
                            $("#ts").css("color","green");
                        }
                        else
                        {
                            $("#ts").html("该用户名已存在");
                            $("#ts").css("color","red");
                        }
                    }
            });
    })

</script>
</html>

2. 0512chuli.php

<?php
$uid = $_POST["u"];

require"DBDA.class.php";
$db = new DBDA();
$sql ="select count(*) from users where uid=\'{$uid}\'";
$arr = $db->query($sql,1);//此封装类默认是0增删改，此处是1的话就是查
if($arr[0][0])
{
    echo "NO";
}
else
{
    echo "OK";
}

二.添加数据

1. tianjia.php

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<h1>添加数据</h1>
<div>代号：<input type="text" id="code" /></div>
<div>名称：<input type="text" id="nno" /></div>
<input type="button" value="添加" id="add" />
</body>
<script type="text/javascript">
$("#add").click(function(){
        var code = $("#code").val();
        var nno = $("#nno").val();
        $.ajax({
                url:"tjchuli.php",
                data:{c:code,n:nno},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                        if(data.trim()=="OK")//如果只有一个判断，可以不用{}.即alert("添加成功");elsealert("添加失败");
                        {
                            alert("添加成功")
                        }
                        else
                        {
                            alert("添加失败")
                        };
                    }
                
            })
    })
</script>
</html>

2. tjchuli.php

<?php
$code = $_POST["c"];
$nno = $_POST["n"];

require"DBDA.class.php";
$db = new DBDA();

$sql = "insert into nation values(\'{$code}\',\'{$nno}\')";
if($db->query($sql))
{
    echo "OK";
}
else
{
    echo "NO";
}

以上是关于ajax的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段