首页前端开发其他前端知识ajax实现增删改查例子

ajax实现增删改查例子

时间2023-11-12 23:00:05发布访客分类其他前端知识浏览699
导读: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
html代码自动分行 Html代码能放在微信公众号吗

游客 回复需填写必要信息