php ajax案例
通过Ajax（Asynchronous Javascript and XML）技术，可以实现异步刷新页面内容，用户可以在页面上做出任何处理，而不必完全提交整个页面，这大大减少了页面刷新的时间和服务器带宽的需求。PHP是一种非常常用的Web开发语言，可以方便地与Ajax技术结合使用。
例1：实时搜索
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
var keyword = $(this).val();
$.ajax({
url: 'search.php',
type: 'post',
data: {keyword:keyword},
success:function(response){
$("#result").html(response);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="search-box" name="search_box" placeholder="Search" />
<div id="result"></div>
</body>
</html>当用户在搜索框中输入内容时，键入事件触发Ajax请求。请求将发送到search.php页面，该页面返回以与关键字匹配的结果数组。返回的数据用于更新一个包含搜索结果的
元素。
例2：无需刷新的表单提交
<?php
if(isset($_POST['submit'])){
$message = $_POST['message'];
$output = "Thank you! Your message '$message' has been sent.";
echo $output;
}
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit-btn").click(function(){
var message = $("#message-box").val();
$.ajax({
url: 'submit.php',
type: 'post',
data: {submit:true,message:message},
success:function(response){
$("#result").html(response);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="message-box" name="message" placeholder="Enter Message" />
<button type="submit" id="submit-btn">Submit</button>
<div id="result"></div>
</body>
</html>这个例子涉及到Ajax请求以及表单提交。用户填写了一个文本框和一个提交按钮。当提交按钮被单击时，键入事件触发Ajax请求。该请求将使用POST方法将文本框的值作为参数发送到submit.php。当响应成功返回时，响应消息将显示在页面上，而不是整个页面刷新。
例3：动态生成图像
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#generate").click(function(){
var width = parseInt($("#width").val());
var height = parseInt($("#height").val());
$.ajax({
url: 'generate_image.php',
type: 'post',
data: {width:width,height:height},
success:function(response){
$("#image").attr("src","data:image/jpeg;base64," + response);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="width" name="width" placeholder="Width" />
<input type="text" id="height" name="height" placeholder="Height" />
<button type="submit" id="generate">Generate Image</button>
<br />
<img src="" id="image" />
</body>
</html>这个例子涉及到Ajax请求以及动态生成图像。用户填写了两个文本框和一个生成图像的按钮。当生成图像按钮被单击时，键入事件触发Ajax请求。该请求将使用POST方法将文本框的值作为参数发送到generate_image.php。当响应成功返回时，响应消息将被转换为图像，显示在页面上。
总之，Ajax可以增加您网站的互动性，并且可以大大提高性能。PHP与Ajax组合在一起使用可以使您的网站更加灵活和快速。