文档章节

php jquery ajax

剑禅觅心
 剑禅觅心
发布于 2016/08/01 21:28
字数 419
阅读 4
收藏 0

为了让用户在留言的时候有更好的体验,提交不用重复载入页面,使用ajax无刷新提交技术显然是一个不错的选择,它还可以免去重复刷新的烦恼!

留言展示页面:index.php
———————————————

<!–
作者:遥远的期待
QQ:15624575
主页:http://www.phptogether.com
–>
<meta charset=’utf-8′>
<title>ajax无刷新留言板–遥远的期待制作</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js” type=”text/javascript”/></script>
<script type=”text/javascript”>
jQuery(function(){
 $.ajax({
     type: “POST”,
     url: “ajax.php”,
     success: function(msg){ 
     $(‘#post_result’).html(msg);
     }
  });
})

jQuery(function(){
  $(“#tj”).click(function(){  
 $.ajax({
     type: “POST”,
     url: “ajax.php”,
     data: “user=”+$(“input[name='user']“).val()+”&pwd=”+$(“input[name='pwd']“).val(),
     success: function(msg){
     $(“input[name='user']“).val(“”);  
     $(“input[name='pwd']“).val(“”);   
     //向每个匹配的元素内部前置内容。
     //这是向所有匹配元素内部的开始处插入内容的最佳方式。
     $(‘#post_result’).prepend(msg); 
     }
  });
 });
})

</script>
<p align=center>第一PHP网提供技术支持–<a href=”http://www.phptogether.com” target=_blank>http://www.phptogether.com</a></p>
<div id=post_result>
</div>
<div id=post>
用户名:<input type=text name=user value=”"><br>
密码:<input type=password name=pwd value=”"><br>
<input type=button name=tj id=tj value=”提交”><br>
</div>
———————————————————————-

留言数据处理页面:ajax.php
———————————————————————-

<?php
$host=”localhost”;
$user=”root”;
$pwd=”root”;
$dbname=”test”;
$link = mysql_connect($host, $user, $pwd)or die(“Could not connect: ” . mysql_error());
mysql_select_db($dbname, $link) or die (‘Can\’t use test : ‘ . mysql_error());
mysql_query(“SET NAMES ‘utf8′”);
mysql_query(“SET CHARACTER_SET_CLIENT=utf8″);
mysql_query(“SET CHARACTER_SET_RESULTS=utf8″);

if($_REQUEST['user']){//提交数据
$user=$_REQUEST['user'];
$pwd=$_REQUEST['pwd'];
$sql_insert=”INSERT INTO `test`.`user` (
`id` ,
`user` ,
`pwd`
)
VALUES (NULL , ‘$user’, ‘$pwd’);”;
mysql_query($sql_insert);
if($id=mysql_insert_id()){
$sql_page=”select * from user where id= $id”;
$page_res=mysql_query($sql_page);
while ($arr=mysql_fetch_array($page_res)){
 $ajax_arr['page_content'].=’id:’.$arr['id'].’<br>user:’.$arr['user'].’<br><hr>’;
}
echo $ajax_arr['page_content'];
}else{
 echo mysql_error();
}
}else{//载入页面时读取数据
$sql_page=”select * from user order by id desc”;
$page_res=mysql_query($sql_page);

while ($arr=mysql_fetch_array($page_res)){
 $ajax_arr['page_content'].=’id:’.$arr['id'].’<br>user:’.$arr['user'].’<br><hr>’;
}
echo $ajax_arr['page_content'];
}
?>

本文转载自:http://blog.csdn.net/amohan/article/details/8228799

共有 人打赏支持
剑禅觅心
粉丝 6
博文 224
码字总数 0
作品 0
深圳
高级程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.5K
9
PHP判断一个请求是Ajax请求还是普通请求

Javascript中大多数的框架如 jquery(jquery ui、jquery easyui)、Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTPXREQUESTED_WITH 头部信息,因此每当发送一个ajax请求你就可以在服务...

Junn
2013/08/05
0
1
20 个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

红薯
2012/04/04
14.7K
6
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
10 个用于检测用户名有效性的插件和JS脚本

网站注册时一般需要用户填写用户名用于登录的唯一标识,这个登录名不允许重复以及一些非字母数字或者简单符号的字符。本文提供了 10 个很不错的脚本用于实现即时的用户名检测结果。 1) jQuer...

红薯
2011/08/02
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

类加载机制过程

1.加载。 将代码转换成字节流加载进内存。加载完之后创建一个Class对象,这个对象是访问数据的入口。 2.验证。 JVM规范验证和代码逻辑验证。 3.准备 内存分配和初始化。对static修饰的类变量...

无精疯
22分钟前
1
0
next.js 提示 chunk styles [mini-css-extract-plugin]

会出现css 导入警告 导入两个插件 并在next.config.js 配置 yarn add webpack-filter-warnings-pluginyarn add mini-css-extract-plugin const FilterWarningsPlugin = require('webpack-......

一箭落旄头
29分钟前
1
0
AWS的自动部署codeploy 应用程序规范文件

codedeploy应用程序的规范文件 ECS平台上的应用规范文件: AppSpec file也可以是 YAML 或 JSON 格式的,可以直接写入控制台内的编辑器内。 AppSpec file用于指定: 用于将流量定向到新任务集...

守护-创造
37分钟前
1
0
Confluence 6 超过当前许可证期限进行升级

这个页面将会对你在进行 Confluence 升级的时候超过了当前许可证的期限进行升级的情况。 许可证警告 在升级的过程中,你将会在 Confluence 的应用程序日志(log file)中看到类似下面的错误提...

honeymoose
43分钟前
2
0
JS 调用Angularjs 的方法

// 1. 获取 Controllerlet appElement = document.querySelector('[data-ng-controller=MessagesCtrl]');let scope = angular.element(appElement).scope();// 2. 调用方法scope.l......

Moks角木
58分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部