`
dimingchan
  • 浏览: 55251 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用jquery不刷新前台页面完成提交表单的例子

阅读更多
使用jquery不刷新前台页面完成提交表单的例子。

前台文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>不刷新页面提交表单测试</title>
</head>
<body>
<h1>不刷新页面提交表单测试</h1>
<br />
<input name="writer" id="writer" type="text" value="" />
<input name="pass" id="pass" type="password" value="" />
<input type="submit" name="submit" id="submit" value="提交" />
</body>
</html>


<script type="text/javascript" src="js/jquery.js"></script>
<!-- 这里不需要form,因为提交时call一个函数 -->
<script type="text/javascript">
$(document).ready(function(){// DOM的onload事件处理函数
	$("#submit").click(function(){// 当按钮submit被点击时的处理函数
		postdata();// submit别点击时执行postdata函数
	});
});

function postdata(){// 提交数据函数
	$.ajax({// 调用jquery的ajax方法
		type:"POST",// 设置ajax方法提交数据的形式
		url:"ok.php",// 把数据提交到ok.php
		
		/* 输入框writer中的值作为提交的数据,
         * 必须使用key/value的形式,如"key=value",
         * 如果多个键值对,就使用&分隔开,
         * 如"key1=value1&key2=value2" */
		data: "writer="+$("#writer").val()+"&pass="+$("#pass").val(),
		success:function(msg){// 提交成功后的回调,msg变量是ok.php输出的内容
					alert("数据提交成功");// 如果有必要,可以把msg变量的值显示到某个DIV元素中
					alert(msg);
				}
	});
}
</script>


后台文件:
<?php
$writer=$_POST['writer'];
$pass=$_POST['pass'];
if(!empty($writer)&&!empty($pass)){
	echo $writer.$pass."<br/>";
}else{
	echo "Empty!";
}
?>
分享到:
评论

相关推荐

    基于JQuery实现异步刷新的代码(转载)

    异步刷新通常指的是在不完全刷新整个页面的情况下,对页面的局部内容进行更新,这种技术广泛应用于Web应用中,尤其是在处理数据异步加载、表单提交、登录验证等场景中。JQuery通过其提供的AJAX方法,使得异步操作变...

    Jquery+Ajax实现的前台登陆验证(

    在本文中,我们将深入探讨如何使用Jquery和Ajax技术实现前端登录验证,并通过Servlet与DBUtils库进行数据库交互。这是一套适用于初学者的学习案例,旨在帮助他们掌握这些核心技术。 首先,`Jquery`是一个流行的...

    JqueryEasyui使用练习

    - **EasyUI**:基于 jQuery,提供了丰富的 UI 组件,如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)等,使得页面构建更加便捷。 2. **主要组件及应用** - **Dialog(对话框)**:用于显示...

    ASP.NET—009:前台传值的另一种方式$.post

    总结来说,ASP.NET前台传值使用$.post方法是一种高效且灵活的方式,它可以轻松地与ASP.NET的后端逻辑进行交互,无需刷新页面即可完成数据传输。通过熟练掌握$.post,开发者能更好地优化用户体验,提升web应用的性能...

    经典前台技术AJAX

    3. **文件上传**:传统的文件上传需要用户提交整个表单,可能导致页面刷新。AJAX可以实现异步文件上传,用户选择文件后,通过XMLHttpRequest的FormData对象,将文件数据发送到服务器,同时可以显示上传进度,提供更...

    一个Spring+hibernate+dwr的例子程序

    为了运行或理解这个例子程序,需要解压这个文件并查看其内部结构,包括但不限于Java源码、配置文件(如Spring的`applicationContext.xml`、Hibernate的`hibernate.cfg.xml`和DWR的`dwr.xml`)、HTML/JS前端文件...

    asp.net与javascriptf之间进行值传递及相互调用个人笔记

    AJAX(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的情况下与服务器进行交互。在ASP.NET中,我们可以使用内置的UpdatePanel或者jQuery AJAX库来实现这一功能。 1. 使用ASP.NET UpdatePanel:...

    添加后台list给前台select标签赋值简单实现

    9. **用户体验优化**: 通过使用Ajax技术,页面不需要进行整体刷新即可更新下拉列表,这样提升了用户的操作体验,使得用户感觉页面的响应速度更快,操作更加流畅。 10. **前后端交互**: 本文的实现方式涉及到前后端...

Global site tag (gtag.js) - Google Analytics