首页> 基础笔记 >JS/JQ基础学习 >Ajax Ajax
JavaScript-AJAX技术：(POST参数提交)实现加法计算
作者：小萝卜 2023-03-23 【 Ajax javascript 】 浏览 578
简介JavaScript-AJAX技术：(POST参数提交)实现加法计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>AJAX实例</title>
</head>
<body>
<!-- html注释 -->
<h2>AJAX技术：(POST参数提交)实现加法计算</h2>
<form action="#" name="myform" method="post" onsubmit="return doAjax()">
数值1：<input type="text" name="num1"/><br/><br/>
数值2：<input type="text" name="num2"/><br/><br/>
<input type="submit" value="求和"/><br/><br/>
<input type="text" readonly name="res" style="border:0px"/>
</form>
<script type="text/javascript">
function doAjax(){
//获取当前表单和数值
var form = document.myform;
var num1 = form.num1.value;
var num2 = form.num2.value;
//1.创建xmlHttpRequest请求对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.初始化请求
xmlhttp.open("post","2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.执行发送
xmlhttp.send("m1="+num1+"&m2="+num2);
//4.设置回调函数
xmlhttp.onreadystatechange=function(){
//alert("ok:"+xmlhttp.readyState);
//判断是否已经请求结束
if(xmlhttp.readyState==4){
//浏览器响应状态
if(xmlhttp.status==200){
//获取响应结果
var res = xmlhttp.responseText;
//输出到浏览器
form.res.value=res;
}else{
alert("请求失败！");
}
}
}
return false;
}
</script>
</body>
</html>
<?php
//ajax处理，实现求和
//获取参数值
$m1 = $_REQUEST['m1'];
$m2 = $_REQUEST['m2'];
//输出结果
echo $m1."+".$m2."=".($m1+$m2);
很赞哦！ (0)
