html ajax表实例代码

在Web开发中，HTML和AJAX是必备的技能。HTML是前端最基础的技术，用来构建网页。而AJAX则是前端常用的异步通信技术，可以实现网页动态更新。

本文将介绍一个基于HTML和AJAX的表单实例代码。这个表单可以通过AJAX技术实现不刷新页面就发送表单数据。

html>
    body>
    form id="myForm" onsubmit="sendForm();
    return false;
    ">
    label for="name">
    姓名：/label>
    input type="text" id="name" name="name">
    br>
    label for="age">
    年龄：/label>
    input type="text" id="age" name="age">
    br>
    input type="submit" value="提交">
    /form>
    p id="result">
    /p>
    script>
function sendForm() {
    var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 &
    &
 xhr.status == 200) {
    document.getElementById("result").innerHTML = xhr.responseText;
}
}
    xhr.open("POST", "submit.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    xhr.send("name="+name+"&
    age="+age);
}
    /script>
    /body>
    /html>
    

以上便是一个基于HTML和AJAX的表单实例代码。其中，HTML代码构建了一个带有姓名和年龄输入框的表单，并定义了一个提交按钮。在表单提交时，会执行一个sendForm()函数，这个函数通过AJAX技术发送表单数据。当AJAX请求完成后，我们将通过JS操作DOM元素将返回结果显示到页面上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！