Ajax小案例

本文通过一个Ajax小案例展示了如何根据编号进行图书搜索。详细介绍了前台和后台的代码实现,最终实现正确运行的结果。

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

需求:根据对应编号搜索对应图书
前台代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax小案例</title>
	<script src="ajax.js"></script>
	<script>
	//需求:输入图书编号,查询对应图书信息
	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			var code = document.getElementById('code').value;
			ajax('03.php','get','code='+code,'json',function(data){
				//解析数据并渲染到页面
				var box = document.getElementById('box');
				if(data.flag == 0){
					box.innerText = '没有该编号书籍';
				}else{
					console.log(data);
					var tag = '<ul><li>书名:'+ data.bookname +'</li><li>'+ data.author +'</li></ul>'
					box.innerHTML = tag;
				}
				
			});

		}
	}
	</script>
</head>
<body>
	请输入图书编号:<input type="text" id="code" name="code">
	<input type="button" value="查询" id="btn">
	<div id="box"></div>
</body>
</html>

后台代码:

<?php 
	$code = $_GET['code'];
	$arr = array();
	$arr[1] = array("bookname"=>"西游记","author"=>"吴承恩");
	$arr[2] = array("bookname"=>"三国演义","author"=>"罗贯中");
	$arr[3] = array("bookname"=>"水浒传","author"=>"施耐庵");
	$arr[4] = array("bookname"=>"红楼梦","author"=>"曹雪芹");
	if(array_key_exists($code, $arr) == 1){//用来判断数组中是否有对应键
		echo json_encode($arr[$code]);
	}else {
		echo '{"flag":"0"}';
	}
 ?>

运行结果:
正确:
在这里插入图片描述
错误:
在这里插入图片描述

ajax经典实例+代码大全 绝对经典 -------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 -------------- 数据库安装说明 -------------- 了解MySQL的用户可以直接使用自己熟悉的方式创建名为ajax的数据库,并将ajax.sql文件导入即可。 下面是简要操作方法: 1. 实例数据库在MySQL 5.0.27 版本下测试通过 2. 将database目录中ajax.sql文件复制到C:\ 3. 进入MySQL安装目录中的bin目录 4. 输入 mysql -u root -p ,然后输入密码登录本地MySQL服务器 5. 输入 CREATE DATABASE ajax DEFAULT CHARACTER SET utf8; 创建名为ajax的数据库 6. 输入 use ajax 7. 输入 source c:\ajax.sql 执行数据库初始化语句 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件,部分Java源文件存放在java目录中。 可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。 ----------- WEB发布方法 ----------- 所有实例在jdk 1.4.2 + Tomcat 5.0.28 环境下测试通过。 将webapp目录中的内容复制到Tomcat的webapps目录中作为一个web应用发布即可。 启动Tomcat前注意修改 ajax/WEB-INF/classes/ajax_db.properties 文件。 将其中的URL、USER和PASSWORD属性根据实际情况进行修改。 Tomcat正常启动后使用 http://localhost:8080/ajax 进行访问 +=========================================================================================== 最后注释: 可能还有一点,就是把你的ajax密码定位好 路径是:${ajax}\ajax\WEB-INF\classes\ajax_db.properties,用记事本打开。那个${ajax}就是你当前存放ajax这个文件夹的路 径 DRIVERS=com.mysql.jdbc.Driver URL=jdbc:mysql://localhost/ajax?useUnicode=true&characterEncoding=utf8 USER=root PASSWORD=ajax 里面的代码是这样写的,把最后一行的那个对应的密码改为你自己数据库的代码就OK
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值