jquery ajax查询获取数据 案例

2024年2月8日发(作者：)

jquery ajax查询获取数据 案例

jqueryajax是前端开发中非常常用的技术之一。它可以通过异步请求向服务器发送请求并获取数据，而无需刷新整个页面。本文将介绍一个jquery ajax查询获取数据的常见案例。

首先，我们需要在页面中引入jquery库。可以使用CDN或直接下载到本地。

接下来，我们先创建一个html页面，添加一个按钮和一个div用于显示查询结果。

查询

然后，我们需要编写jquery ajax请求的代码。在按钮点击事件中，我们向服务器发送请求，通过回调函数成功获取数据并将其显示在页面上。

$('#searchBtn').click(function(){

$.ajax({

url: '',//服务器地址

type: 'get',

data: {keyword: $('#keyword').val()},//要查询的关键字

dataType: 'json',//返回数据格式

success: function(data){

var html = '';

for(var i=0;i<;i++){

- 1 -

html += '

姓名：'+data[i].name+'，年龄：'+data[i].age+'

}

$('#result').html(html);

},

error: function(){

alert('请求失败！');

}

});

});

在服务器端，我们可以使用PHP语言来处理请求并返回数据。例如，我们可以根据关键字查询数据库中的用户信息，并将结果以JSON格式返回给客户端。

<?php

$keyword = $_GET['keyword'];

$conn = mysqli_connect('localhost','root','','test') or

die('连接失败！');

mysqli_query($conn,'set names utf8');

$sql = 'select * from user where name like '%$keyword%'';

$result = mysqli_query($conn,$sql);

$data = array();

while($row = mysqli_fetch_assoc($result)){

- 2 -

$data[] = $row;

}

echo json_encode($data);

>

在这个案例中，我们通过jquery ajax技术实现了向服务器查询数据的功能。这是一个非常常用的技术，可以用于很多场景中，如搜索、地图、天气等。希望本文能对大家有所帮助。

- 3 -