php+ajax+jq实现简单的异步提交
程序员文章站
2022-07-12 19:22:37
...
前端ajax.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步</title>
</head>
<body>
<form>
<input type="text" name="x" />
+
<input type="text" name="y" />
</form>
<br />
<button>结果</button>
<br />
<input type="text" id="sum" />
</body>
</html>
<script type="text/javascript" src="../../php_bbs/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){ //给按钮设置点击事件
$.ajax({
type:"post", //提交方式
url:"ajax.php", //执行的url(控制器/操作方法)
async:true, //是否异步
data:$('form').serialize(), //获取form表单的数据
datatype:'json', //数据格式
success:function(data){
console.log(data); //打印
$('#sum').val(data);
}
});
return false;
})
})
</script>
后端ajax.php文件
<?php
$x=$_POST['x'];
$y=$_POST['y'];
$sum=$x+$y;
print_r($sum);
?>
其他的异步方式
1.get方式
$.get(
'demo.php',
{'name':'小明'},
function(data){
console.log(data);
});
2.post方式
$.post(
'demo.php',
{'name':'小明'},
function(data){
console.log(data);
});
3.ajax方式
$.ajax({
type:'post',
url:'demo.php',
data:{'username':'科学家'},
datatype:'json',
success:function(data){
console.log(data);
}
});
如果您觉得本篇内容不错,可以点个关注,给个赞
上一篇： webpack配置多入口
下一篇： webpack的基本使用