jquery实现ajax(后台获取到电话号码并返回给前端)

最新推荐文章于 2021-03-15 16:06:33 发布

Laomoon2

最新推荐文章于 2021-03-15 16:06:33 发布

阅读量1.5k

点赞数

分类专栏：前端基础文章标签： ajax jquery

本文链接：https://blog.youkuaiyun.com/Laomoon2/article/details/79014544

版权

前端基础专栏收录该内容

7 篇文章

订阅专栏

本文演示如何通过jQuery的AJAX功能与后台PHP进行数据交互。后台代码中，AJAX请求发送数据到ajax.php，该文件处理请求并返回字符串msg。成功时，AJAX调用success回调，错误时调用error回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台代码（文件名 ajax.php）

<?php
echo $_POST['mobile'];
?>

前端代码（文件名 ajax.html）

<input type='text' name='mobile' id='mobile'/>
<input type='button' id='btn' value='发送号码给后端'/>

为按钮绑定ajax事件，当没有输入号码或其他内容时，弹出警告窗口，提示‘手机号不能为空’，jquery代码如下，（文件名：ajax.html）

<script type="text/javascript">
	$(document).ready(function(){
		 $('#btn').on('click',function(){
	   	if($('#mobile').val() == '')
	   		alert('请输入手机号');
	   	else
	   	{
		   $.ajax({
			   url: 'ajax.php',
			   type: 'post',
			   data: {
			         mobile:$("#mobile").val(),
			   },
			   success: function(msg){
			        alert(msg);
			   },
			   error: function(){
			         alert('发送失败');
			   }
			})
	   	 }
  	      })
	})
  
</script>

说明：

1、url对应的路由处理ajax请求

2、代码中msg这个参数是来自于ajax.php的输出字符串

3、data是传给处理ajax请求文件的数据，也就是url对应的处理文件

4、success和error是回调函数，成功执行success对应的方法；失败执行error对应的方法

这是一个没有经过实际执行的代码，如有错误欢迎留言指正