php Ajax前后台交互案例

雨点打透心脏的1/2处 2021-07-24 11:08 445阅读 0赞

**前台:**

<html>
    <head>
    	<meta charset="utf-8">
    	<title>前后台交互案例</title>
    	<script src="jquery-3.4.1.js"></script>
    <body>
    	<span>用户名:</span><input type="text" class="uname"><br/>
    	<span>密码:</span><input type="text" class="pwd"><br/>
    	<button>用户登录</button>
    
    
    	<script >
    	var $btns=$("button");
    	var $input=$(".uname");
    	var $pwdInput=$(".pwd");
    
    		$btns.click(function(){ 
    			$.ajax({ 
    				type:"post",
    				url:'3.php',
    				dataType:'json',
    				data:{ 
    					uname2:$input.val(),
    					password:$pwdInput.val()
    				},
    				success:function(res)
    				{ 
    					if(res['info']==0)
    					{ 
    						alert('登陆失败,用户名或密码错误');
    					}else if(res.info){ 
    						alert('登陆成功');
    					}
    				}
    
    			});
    		});
    
    	</script>
    
    </body>
    </head>
    </html>

--------------------

**后台:**

<?php
    	
    	 $name=$_POST['uname2'];
    	  $pwd=$_POST['password'];
    	  $success=array('msg'=>'ok');
    
    	  //接受数据判断
    	  if($name=="大帅哥" && $pwd=="123456")
    	  { 
    	  	$success['info']=1;
    	  }else{ 
    	  	$success['info']=0;
    	  };
    	
    	 //返回给前端
    	 echo  json_encode($success);
    
    	//账户名必须是大帅哥
    	//密码必须是123456
    
    
    ?>

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关利用ajax实现前后台交互

HTML界面（重要元素id="userRole"） <div> <label >用户角色：</label> <!-- 列出所有的角色分类

矫情吗；*/ 2023年06月19日 07:25/ 0 赞/ 12 阅读

相关 ajax前后台交互实现省市区级联

1.html代码 <div class="row cl"> <label class="form-label col-xs-4 col-sm-3">所在地址

男娘i/ 2022年06月15日 00:00/ 0 赞/ 323 阅读

相关 Ajax前后台交互返回普通格式和JSON格式

采用阿里fastJson 下面是pom.xml <dependency> <groupId>com.alibaba</groupId>

叁歲伎倆/ 2022年06月07日 11:53/ 0 赞/ 220 阅读

相关前后台交互

[通过AngularJS实现前端与后台的数据对接（一）——预备工作篇][AngularJS] 最近，笔者在做一个项目：使用AngularJS，从而实现前端与后

小咪咪/ 2022年06月05日 00:42/ 0 赞/ 360 阅读

相关前后台数据交互小结

目录引言 1、ajax 1.1、创建ajax 1.2、ajax事件 1.3、服务器响应格式 1.4、ajax使用xmlhttprequest对象读取数据 2

超、凢脫俗/ 2022年03月21日 15:54/ 0 赞/ 349 阅读

相关 EXTJs前后台交互

<1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "",

今天药忘吃喽~/ 2022年02月13日 19:22/ 0 赞/ 322 阅读

相关 ajax前后台的交互 Bootstrap 栅格系统-布局

昨日回顾 1.选择器:$('css3 语法选择器') 2.js,jq 对象转换　　_divs = $('.div') _divs[0]

逃离我推掉我的手/ 2021年12月03日 07:55/ 0 赞/ 285 阅读

相关【AJAX】AJAX进行前后台信息交互

用AJAX方法可将表单中的数据传至后台进行处理，而不需要进行页面的跳转，可以在当前页面完成。 <!DOCTYPE html PUBLIC "-//W3C//DTD X

痛定思痛。/ 2021年09月26日 01:52/ 0 赞/ 421 阅读

相关 php 基于数据库的前后台交互登录、注册案例

注意后台php文件:不能有<-- -->注释内容，不能有除了echo json\_encode()外其他的echo 输出，否则无法数据无法传到前台!!! sql语句中插

Bertha 。/ 2021年08月19日 17:31/ 0 赞/ 422 阅读

相关 php Ajax前后台交互案例

前台: <html> <head> <meta charset="utf-8"> <title>前后台交互案例</title>

雨点打透心脏的1/2处/ 2021年07月24日 11:08/ 0 赞/ 446 阅读