ajax实现增删改查例子
导读:Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的技术,它能够实现网页上的增删改查功能,使用户能够实时地与服务器交互数据而无需刷新整个页面。下面我们将通过一个示例来演示如何使用Ajax实现一个...
Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的技术,它能够实现网页上的增删改查功能,使用户能够实时地与服务器交互数据而无需刷新整个页面。下面我们将通过一个示例来演示如何使用Ajax实现一个基本的增删改查功能。假设我们有一个名为"学生管理系统"的网页应用,我们需要实现对学生信息的增删改查功能。现在我们来看一个例子,以更好地理解Ajax的应用。在"学生管理系统"中,我们有一个学生信息表格,包括学生的姓名、学号、年龄和性别。首先,我们需要实现的是添加学生信息的功能。用户在输入框中输入学生的姓名、学号、年龄和性别后,点击"添加"按钮,程序将通过Ajax将用户输入的数据发送到服务器,然后将新的学生信息添加到数据库中。下面是用Ajax实现添加学生信息的代码示例:function addStudent() { var name = document.getElementById("name").value; var number = document.getElementById("number").value; var age = document.getElementById("age").value; var gender = document.getElementById("gender").value; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { // 添加成功后的处理代码} } ; xmlhttp.open("POST", "add_student.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("name=" + name + "& number=" + number + "& age=" + age + "& gender=" + gender); }在上面的代码中,我们首先获取用户输入的学生信息,然后创建一个XMLHttpRequest对象,通过open方法发送一个POST请求到服务器的add_student.php页面,并通过setRequestHeader方法设置请求头,并将用户输入的学生信息作为参数通过send方法发送到服务器。服务器收到请求后,将会将学生信息添加到数据库中,并返回一个成功的状态码。接下来,我们来实现删除学生信息的功能。用户可以通过点击学生信息表格中的"删除"按钮来删除对应的学生信息。点击"删除"按钮后,程序通过Ajax将要删除的学生信息的编号发送到服务器,然后将该学生信息从数据库中删除。下面是用Ajax实现删除学生信息的代码示例:
function deleteStudent(id) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { // 删除成功后的处理代码} } ; xmlhttp.open("GET", "delete_student.php?id=" + id, true); xmlhttp.send(); }在上面的代码中,我们创建了一个XMLHttpRequest对象,通过open方法发送一个GET请求到服务器的delete_student.php页面,并将要删除的学生信息的编号作为参数通过send方法发送到服务器。服务器收到请求后,根据学生信息的编号将该学生信息从数据库中删除,并返回一个成功的状态码。接着,我们来实现修改学生信息的功能。用户可以通过双击学生信息表格中的某一行来编辑对应的学生信息。用户修改完信息后,点击"保存"按钮,程序通过Ajax将修改后的学生信息发送到服务器,然后将服务器中对应学生信息进行更新。下面是用Ajax实现修改学生信息的代码示例:
function editStudent(id) { // 获取对应学生信息的文本框对象var nameInput = document.getElementById("name_" + id); var numberInput = document.getElementById("number_" + id); var ageInput = document.getElementById("age_" + id); var genderInput = document.getElementById("gender_" + id); var name = nameInput.value; var number = numberInput.value; var age = ageInput.value; var gender = genderInput.value; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { // 修改成功后的处理代码} } ; xmlhttp.open("POST", "edit_student.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("id=" + id + "& name=" + name + "& number=" + number + "& age=" + age + "& gender=" + gender); }在上面的代码中,我们首先获取对应学生信息的文本框对象,然后获取用户修改后的学生信息。创建一个XMLHttpRequest对象,通过open方法发送一个POST请求到服务器的edit_student.php页面,并将学生信息的编号以及修改后的学生信息作为参数通过send方法发送到服务器。服务器收到请求后,将会根据学生信息的编号更新该学生的信息,然后返回一个成功的状态码。最后,我们来实现查询学生信息的功能。用户可以通过在搜索框中输入关键字,然后点击"搜索"按钮来查询与关键字匹配的学生信息。点击"搜索"按钮后,程序通过Ajax将用户输入的关键字发送到服务器,然后将服务器中与关键字匹配的学生信息返回给用户。下面是用Ajax实现查询学生信息的代码示例:
function searchStudent() { var keyword = document.getElementById("keyword").value; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { // 查询成功后的处理代码} } ; xmlhttp.open("GET", "search_student.php?keyword=" + keyword, true); xmlhttp.send(); }在上面的代码中,我们获取用户输入的关键字,创建一个XMLHttpRequest对象,通过open方法发送一个GET请求到服务器的search_student.php页面,并将用户输入的关键字作为参数通过send方法发送到服务器。服务器收到请求后,根据关键字查询与之匹配的学生信息,并返回给用户。通过以上的示例,我们可以看到Ajax的强大之处,它使得网页上的增删改查功能变得更加便捷和实时。无需刷新整个页面,就能够与服务器实时地交互数据,提升了用户体验和网页性能。无论是学生管理系统还是其他类型的网页应用,都可以通过Ajax来实现各种功能,满足用户的需求。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: ajax实现增删改查例子
本文地址: https://pptw.com/jishu/536588.html