thinkPHP5.1+jQuery+ajax实现搜索，用append展示ajax返回数据的完整实现

最新推荐文章于 2021-08-06 00:11:54 发布

原创

最新推荐文章于 2021-08-06 00:11:54 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #json #php #前端

本文详细介绍了如何利用thinkPHP5.1框架，结合jQuery和ajax技术，实现动态搜索功能。通过前端发送ajax请求到后台，PHP处理搜索逻辑并返回json数据，再用jQuery的append方法将搜索结果显示在页面上，提供了一种完整的前后端交互解决方案。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>兑换码</title>

    <script src="../jQuery/jquery-3.3.1.min.js"></script>

</head>

<body>

<div id="a">

    <form name="form1" id="form1" class="key_form">

        <input type="text" name="cdkey" class="key" value="" placeholder="请输入兑换码" autocomplete="off">

        <input type="submit" class="key_sub" value="搜索">

    </form>

    <div id="content">



    </div>

</div>

</body>

</html>

<script>

    $(function () {

        //查询CDK兑换信息



        $('#form1').submit(function () {

            $.ajax({

                url:"http://www.huafen.cn/supplier/key/product",

                type:"post",

                cache:false,//上传文件不需要缓存

                dataType:'json',

                data:$("#form1").serialize(),

                success:function (data) {

                    console.log(data)

                    if (data.data) {

                        var html='';

                        html = html+'<div class="key_body" >\n' +

                            '        <div class="user_info">\n' +

                            '            <p class="title">客户信息</p>\n' +

                            '            <div class="header">\n' +

                            '                <div class="head_img"><img src="'+data.data.user.head_img+'" title="客户"> </div><span>'+data.data.user.nickname+'</span>\n' +

                          &n