1>XML/HTML代码
<script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script>
<input name="username" id="username" type="text" value="" />
<input name="pass" id="pass" type="password" value="" />
<input type="submit" name="button" id="button" value="提交" />
<!--这里不需要form,因为提交时call一个函数-->
<script type="text/javascript">
$(document).ready(function(){ //DOM的onload事件处理函数
$("#button").click(function(){ //当按钮button被点击时的处理函数
postdata(); //button被点击时执行postdata函数
});
});
function postdata(){ //提交数据函数
$.ajax({ //调用jquery的ajax方法
type: "POST", //设置ajax方法提交数据的形式
url: "ok.php", //把数据提交到ok.php
data: "username="+$("#username").val()+"pass="+$("#pass").val(), //输入框username中的值作为提交的数据
success: function(msg){ //提交成功后的回调,msg变量是ok.php输出的内容。
alert("数据提交成功"); //如果有必要,可以把msg变量的值显示到某个DIV元素中
}
});
}
2> 后台文件:
<?php
require "config.php";
require "conn.php";
$username=$_POST['username'];
$pass=$_POST['pass'];
mysql_query("insert into user values(0,'$username','$pass')",$db);
//echo $_POST['username'];
?>
</script>
分享到:
相关推荐
本资源重点展示了如何利用jQuery来实现弹窗表单的填写和提交功能,这对于用户交互和数据收集至关重要。下面将详细阐述这个过程中的关键知识点。 首先,jQuery弹窗通常通过两种方式实现:一种是使用插件,如jQuery ...
而“无刷新提交”则是现代Web交互中提高用户体验的重要技术,它允许用户在不重新加载整个页面的情况下发送请求并更新部分内容。本文将详细介绍如何在MVC框架下实现无刷新提交。 1. **无刷新提交原理**: 无刷新...
通过创建一个隐藏的form表单,设置其enctype为"multipart/form-data",并利用Ajax发送表单数据,从而实现文件的无刷新上传。 **3. jQuery实现无刷新上传的步骤** - **选择插件**:首先,你需要选择一个合适的...
在IT行业中,无刷新上传是一种...总结起来,这个例子展示了如何利用jQuery和Ajax技术实现无刷新文件上传,结合第三方插件简化了实现步骤。通过这种方式,开发者可以创建更友好、高效的Web应用程序,提高用户满意度。
**例3:表单提交的无刷新加载** 第三个例子是将表单数据无刷新地发送到PHP。使用`$.post()`方法,我们可以捕获表单提交事件,然后将数据发送到PHP服务器。 ```javascript // jQuery代码 $('#myForm').submit...
总的来说,这个项目是一个很好的学习案例,涵盖了jQuery的动画功能、JavaScript的表单验证和Ajax交互、以及前端开发的基本架构。无论是对于初学者还是经验丰富的开发者,都能从中汲取灵感和技巧,提升自己的前端开发...
这仅仅是开始,实际项目中,Ajax可以用来实现更多复杂的交互,比如分页加载、实时聊天、无刷新表单提交等。 了解并掌握这些基础知识对于任何想要涉足Web开发的人来说都是至关重要的。通过实践这个最简单的例子,你...
jQuery Mobile 使用无刷新技术(AJAX)来实现页面间的平滑切换。通过设置`data-rel="next"`或`data-rel="back"`,可以实现向后或向前的页面跳转。同时,`data-transition`属性可以指定过渡动画,如滑动、淡入淡出等...
总结,jQuery和`jquery.form.js`插件提供了强大的表单提交工具,使得开发者能够轻松实现异步、无刷新的交互体验,尤其在处理文件上传等复杂场景时,其优势更为明显。通过熟练掌握这些技术,可以提升Web应用的用户...
总结一下,这个例子展示了如何使用jQuery的Ajax功能来方便地提交整个表单,而无需传统表单的submit事件,从而实现异步无刷新的交互体验。在实际应用中,还可以添加错误处理回调、自定义HTTP头、超时设置等更多选项,...
总结,jQuery的`$.ajax`方法结合自定义辅助函数,可以轻松实现Form表单的无刷新提交,避免了手动构建数据对象的麻烦。通过这种方式,你可以创建更加动态和交互式的Web应用,提高用户的满意度。了解和掌握这些技术...
在这个案例中,我们关注的是如何利用ASP.NET、批处理、无刷新AJAX以及jQuery Form插件来实现图片的批量上传功能。这个功能允许用户在不刷新整个页面的情况下,上传多张图片,提升用户体验。 批处理在ASP.NET中指的...
例如,一个简单的jQuery无刷新读取数据库的例子可能如下: ```javascript $.ajax({ type: "POST", url: "readData.asp", data: { id: "1" }, success: function(response) { // 更新页面元素 $("#result")....
"jQuery三步骤表单内容提交特效"就是一个典型的例子,它将表单提交过程分为三个阶段,通过视觉提示提升用户的使用体验。本文将深入探讨这一特效的实现原理和应用技巧。 一、jQuery基础与表单操作 jQuery库简化了...
jQuery 实现 form 表单基于 AJAX 无刷新提交是一种常见的前端技术,它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。这提高了用户体验,因为页面的其他部分可以保持活动状态,而不会打断用户的操作...
本篇将通过一个"jquery form提交"的例子,深入探讨jQuery在表单提交中的应用,为初学者提供一个实用的学习起点。 1. **jQuery简介** jQuery是由John Resig在2006年创建的一个轻量级的JavaScript库,它的核心理念是...
在现代Web开发中,jQuery库提供了许多...通过这种方式,我们可以利用jQuery的Ajax功能实现无刷新的表单提交,从而提高用户体验。记得在实际应用中,根据具体需求调整代码,例如处理服务器返回的错误、验证表单数据等。
6. **Ajax**:如果表单数据需要发送到服务器进行处理,jQuery的Ajax功能可以实现无刷新提交,保持用户界面的连贯性。 在压缩包内的文件"说明.htm"中,可能包含的是关于如何使用和定制这个问卷表单的详细说明,包括...
首先,异步提交是Web开发中的重要技术,它允许页面在不刷新的情况下与服务器进行数据交换,提高了用户体验。jQuery提供了$.ajax(), $.get()和$.post()等方法来实现这一功能,使得异步请求变得更加简单。 $.get()...
jQuery Form插件是jQuery库的一个扩展,它使得表单提交变得更加灵活和易于控制,特别是在处理文件上传时。在这个例子中,我们将探讨如何在Asp.Net MVC项目中实现这一功能。 首先,我们需要确保项目已经引用了必要的...