ajax提交并且jquery渲染到页面上，实现搜索功能：

木子李ll

已于 2022-05-07 16:16:02 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery ajax html

于 2022-03-29 14:21:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43209524/article/details/123820353

本文介绍了一个使用Ajax实现的搜索功能，通过jQuery进行页面元素的渲染，并详细展示了从前端页面设计到后端PHP处理的全过程。前端采用Ajax发送请求并利用jQuery更新页面内容，后端则用PHP处理SQL查询并将结果以JSON格式返回。

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

        <form style="float: right;margin-top: -10px"  id="form" onsubmit="return false" action="##" method="post">
        <input type="text" style="height: 30px;padding-left: 10px" value="" placeholder="search name" name="name">
            <button style="height: 35px;border:0;background-color: #990000;color: #FFFFFF;border-radius: 10px;padding-left: 20px;padding-right: 20px" onclick="search()">search</button>
    </form>
</span>
<div id="app" style="position: absolute;top: 50px;background-color: #990000;color:#FFFFFF;width: 70%;text-align: center;z-index: 99999">
    <div class="content">

    </div>
</div>

ajax提交并且jquery渲染到页面上：

<script>
    function search() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "../includes/dosearch.php",
            data: $('#form').serialize(),
            success: function (data) {
                        $.each(data, function(i, n){
                                                   $(".content").prepend('<br><a href="demo.php?o_id='+n.o_id+'" style="color: #FFFFFF;"><event></event> name: '+n.name+'</a><br><br>')

                        })
 

            },
        });
    }
</script>

PHP返回JSON

$servername = "localhost";
$username = "root";//数据库用户名
$password = "root";//数据库密码
$dbname = "dbname";
$conn = mysqli_connect($servername,$username,$password,$dbname);
if ($conn->connect_error) {
    die("Connection failed: " .$conn->connect_error);
}
$search_name = $_POST['name'];
$sql = "SELECT o_id,name FROM organizations WHERE name LIKE '%$search_name%'";

$result = mysqli_query($conn, $sql);
if(!$result) {
    echo $sql;
} else{
    while($data = mysqli_fetch_assoc($result)) {
        $data_search[] = $data;
    }
}

 

//var_dump($data_search);
$data_json = json_encode($data_search);//return to json data

echo $data_json;//output data

效果图：
在这里插入图片描述