php+JQuery+Ajax简单实现页面异步刷新 (转)
页面显示如下:
JQueryAjax.html中的代码如下(用的较为简单的$.post)
- <html>
- <head>
- <meta charset="UTF-8">
- <title>JQueryAjax+PHP</title>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
- </head>
- <body>
- 用户名:<input type="text" id="username" name="username" /><br>
- 密码:<input type="password" id="password" name="password" /><br>
- <button type="button" class="butn">ajax提交</button><br>
- <span class="con"></span>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".butn").click(function(){
- var username = $("#username").val();
- var password = $("#password").val();
- $.post('ajax.php',{name:username,pwd:password},function(data) {
- alert(data);
- $(".con").html(data);
- })
- })
- })
- </script>
- </body>
- </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
用户名:<input type="text" id="username" name="username" /><br>
密码:<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax提交</button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.post('ajax.php',{name:username,pwd:password},function(data) {
alert(data);
$(".con").html(data);
})
})
})
</script>
</body>
</html>
ajax.php:
- ajax.php
- <?php
- echo '用户名:',$_POST['name'],',密码:',$_POST['pwd']."<br>";
- //这里可以进行一些操作,比如数据库交互
- echo "操作完毕";
- ?>
ajax.php
<?php
echo '用户名:',$_POST['name'],',密码:',$_POST['pwd']."<br>";
//这里可以进行一些操作,比如数据库交互 echo "操作完毕";
?>
在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式
例如将JQueryAjax中的代码修改为如下形式:
- <html>
- <head>
- <meta charset="UTF-8">
- <title>JQueryAjax+PHP</title>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
- </head>
- <body>
- 用户名:<input type="text" id="username" name="username" /><br>
- 密码:<input type="password" id="password" name="password" /><br>
- <button type="button" class="butn">ajax提交</button><br>
- <span class="con"></span>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".butn").click(function(){
- var username = $("#username").val();
- var password = $("#password").val();
- $.ajax({
- url: "ajax.php",
- type: "POST",
- data:{name:username,pwd:password},
- dataType: "json",
- error: function(){
- alert('Error loading XML document');
- },
- success: function(data,status){//如果调用php成功
- alert(status);
- alert(data);
- $('.con').html("用户名:"+data[0]+"密码:"+data[1]);
- }
- });
- })
- })
- </script>
- </body>
- </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
用户名:<input type="text" id="username" name="username" /><br>
密码:<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax提交</button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "ajax.php",
type: "POST",
data:{name:username,pwd:password},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
}
});
})
})
</script>
</body>
</html>
ajax.php
- <?php
- $name = $_POST['name'];
- $pwd = $_POST['pwd'];
- $array = array("$name","$pwd");
- //这里进行一个些操作,比如数据库交互
- echo json_encode($array);//json_encode方式是必须的
- ?>
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$array = array("$name","$pwd");
//这里进行一个些操作,比如数据库交互 echo json_encode($array);//json_encode方式是必须的
?>
运行效果如下:
http://blog.csdn.net/qq_28602957/article/details/51814437
php+JQuery+Ajax简单实现页面异步刷新 (转)的更多相关文章
- Java进阶知识01 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能
1.效果图示 横线上方的部分不动(没有刷新),下方实现刷新(异步刷新) 2.实现步骤 jquery+ajax+struts技术实现异步刷新功能的步骤: 1.需要用到 jquery+ajax+st ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- Jquery Ajax调用aspx页面方法
Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...
- jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...
- Jquery Ajax调用aspx页面方法 (转载)
在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...
- Jquery Ajax调用aspx页面实例
目前,我会的几种asp.net界面与后台代码交互方式有几种: 1.webform+服务器控件交互: 2.webform+jquery+ajax+一般处理程序交互: 3.webform+jquery+a ...
- Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
- C# .net Jquery ajax 简单示例
jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...
- jQuery AJAX实现调用页面后台方法
1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- iOS开发进阶 - 日志输出框架CocoaLumberjack与XcodeColors插件的简单使用(swift版)
CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.XcodeColors是用于控制台着色的工具,配合着CocoaLumberjack用有更好的效果,不废话, ...
- lamp架构之升级php版本
当你看到这篇文章的时候 YHSPY.COM 服务器上的PHP版本已经从 5.4.27 升级到了 7.0.4,这是一个重大的飞跃.一路升级遇到了很多问题.官方声称PHP7最大的升级就是在语言性能上的提升 ...
- spring security结合数据库验证用户-注解方式
项目目录结构如下: 首先数据库的建立和数据导入,以及一些类的依赖参考XML配置方式,需要修改一些配置. 一.在AppConfig文件中添加DataSource的配置 @Bean(name = &quo ...
- Buildbot初探
什么是Buildbot Buildbot是一个持续集成和自动化测试框架,我在毕业刚进VMware不久的一个和以色列人合作的项目中接触到Buildbot,当时我真的恨死它了...经常随意的提交了一些代码 ...
- 详细Http状态查询
状态代码 状态信息 含义 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 Switching Protocols 服务器将遵从客户的请求转 ...
- scala学习手记8 - 自适应的默认做法
scala有一些默认做法,会让代码更简洁.更易读写,下面列出了这样几个特性: 1. 支持脚本.scala支持脚本,因此无须将所有的代码都放到类里.如果脚本可以满足需求,就将代码放到一个脚本里,无须再创 ...
- java socket - 传递对象
Person类: package com.zhyea.olproxy.socket; import java.io.Serializable; public class Person implemen ...
- angularjs跨域post解决方案
转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传 ...
- php爬虫框架选用什么
php爬虫框架选用什么 一.总结 一句话总结:phpspider:官方下载地址:https://github.com/owner888/phpspider 1.phpspider能够帮我们解决哪些问题 ...
- 智课雅思词汇---二十四、形容词后缀-al-ial-ar-ary-ic-id-ish-ile-ine-oid-ory
智课雅思词汇---二十四.形容词后缀-al-ial-ar-ary-ic-id-ish-ile-ine-oid-ory 一.总结 一句话总结: 1.形容词后缀-al? autumnal 英 [ɔː'tʌ ...