广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    jQuery中使用ajax对表单数据进行异步验证

    2018-04-16 10:56:49 次阅读 稿源:互联网
    广告

    在网页中使用Ajax可以让网页的响应更快,通过异步地向服务器发送请求,不需要重新载入页面,提升了用户的体验。

    jQuery中使用Ajax基本格式为:

    $('#button').click(function(){	var data = $('.username').val();	$.ajax({		type:"POST",		url:"validate.php",		data: data,		success: function(html) {			$(#id).html(html);		}	});	return false;});

    Type:定义了HTTP方法的字符串,可以是GET和POST类型,默认为GET;
    url:需要访问的网页地址字符串;
    data:一个map对象或者字符串,需要发送给服务器的数据;
    success:回调函数,从服务器返回的数据会赋给这个回调函数的参数;
    最后我们使用return false;从而抑制了浏览器的默认点击行为,因为这里是通过jQuery代码执行动作的。

    下面就通过Ajax验证用户输入的数据,把结果显示在网页上:首先是html表单如下:
    <form id="register" method="post" action="">	<span class="tips">请输入你的用户名:</span>	<input type="text" name="username" class="username" />		<span class="result"></span><br />	<input type="submit" id="submit" /></form>
    jQuery代码如下:
    $(document).ready(function() {	$('.result').hide();	$('#submit').click(function(){		var username = $('.username').val();		var data = 'username=' +username;		$.ajax({			type:"POST",			url:"validate.php",			data:data,			success:function(html) {				$('.result').show();				$('.result').text(html);			}		});		return false;	});});
    服务器端执行脚本如下:
    <?php	$username = $_POST['username'];	//正确的用户名由小写字母,数字和下划线组成	if(!eregi("^[a-z0-9_]+$", $username)){		echo "用户名格式不正确!".$username;	} else {		echo "恭喜,这是合法的用户名!";	}?>

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告