来自 系统操作 2019-11-20 23:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

js原生态ajax创设方法介绍,JQuery中ajax异步验证表

在未现身jquery从前作者们要开创ajax就务须协调行使XMLHttpRequest来创建ajax了,上边笔者把自己从小到大前的写的ajax拿出去

在jquery中的ajax中有post,get三种异步提交表单的兑现了,上边作者来给大家介绍多个轻便的jquery ajax表单验证实例吧,希望对各位朋友有帮带。

XMLHttpRequest

$.get和$.post方法生机勃勃致,第一个参数是地点,第一个是传的值,第八个是成功后的回调函数
post方法:

 代码如下

 代码如下

复制代码

复制代码

<script type=”text/javascript”>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open(“GET”,”filefunction.php?dt=attatchment&u=abc.txt”,true);
xmlhttp.send();
}
</script>

function emailb(){
var email = $("#email").val();
if(email==""){
$("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_false.gif">
<font color="red">Email地址无法为空</font></span>');
}
else{
$.post("/index.php/Index/checkEmail2",{"email":email,"randnum":Math.random()+''},function

上面来探视jquery+ajax/" target="_blank">jquery ajax应用

(res){
if(res=='1'){
$("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_true.gif">
<font color="green">能够应用</font></span>');
}
else{
$("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_false.gif">
<font color="red">'+res+'</font></span>');
}
});
}
}

jQuery Ajax 事件

get方法:

Ajax央浼会生出若干不等的风波,大家能够订阅那么些事件并在里面管理大家的逻辑。在jQuery这里有三种Ajax事件:局地事件 和 全局事件。

 代码如下

后生可畏对事件就是在每趟的Ajax央浼时在措施钦定义的,譬喻:

复制代码

 代码如下

var p = new prompts();
$('#username').blur(function(){
var username = $('#username').val();    //获取表单值
if(username == ''){
p.p('#user_prompt','p1','p2 p3','大小写斯拉维尼亚语字母、汉字、数字、下划线组成的长短 3-12 个字节以

复制代码

内');                c_user = '';
}else if(username.length < 3){
p.p('#user_prompt','p2','p1 p3','客户名长度错误!');
c_user = '';
}else if(!validate.username(username)){
p.p('#user_prompt','p2','p1 p3','此客商名违法。');
c_user = '';
}else{
//判别客商名是或不是留存 ajax 基于jQuery
$.get("chk_username.php",{username:$('#username').val()
},function(data,textStatus){
if(data.indexOf('true') != -1){
p.p('#user_prompt','p3','p1 p2','恭喜您,您能够利用那个客户名注册!');
c_user = 'yes';
}else{
p.p('#user_prompt','p2','p1 p3','该顾客名早就被登记,请接纳别的客户名。');
c_user = '';
}
})
}
chkreg();//每一遍鼠标离开都印证一下。
function chkreg(){
if(c_user == 'yes' && c_pwd1 == 'yes' && c_pwd2 == 'yes' && c_email == 'yes' && c_checkcode

 $.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

== 'yes'){
flag = true;
}else{ flag = false;}
}

再就是我们还足以一贯运用如

ajax方法

jQuery.get( url, [data], [callback] ):使用GET方式来张开异步要求

 代码如下

load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中

复制代码

jQuery.post( url, [data], [callback], [type] ) :使用POST方式来开展异步需要

<form action="/loupan/newask.php" method="post" id="submitform"  name="submitform" ><tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="6%">手机:</td>
          <td width="21%"><input name="mo" type="text" class="inp" id="mo" size="17"

那个都很正确,只符合一点点input即便有大气的大家必需选取ajax - serialize() 方法措施了,如下

/></td>
          <td width="8%" align="right">邮箱:</td>
          <td width="21%"><input name="email" type="text" class="inp" id="email" size="17"

 代码如下

/></td>
          <td width="57%"><span class="gray">留下您的手提式有线电话机号码,有最新音信我们会发送到您手提式有线电话机

复制代码

</span></td>
        </tr>
      </table></td>
      </tr>
    <tr>
      <td height="90" align="left">
        <textarea name="bak" cols="80" rows="5" class="lab" id="bak1"></textarea></td>
      </tr>
    <tr>
      <td><input name="button" type="button" class="but" id="buttonajax" value="提交留言"

html

/>
        <span class="gray">        提议疑义,将有正统的置业奇士总参或房乐网网络朋友帮您解答

<form  method="post" id="submitform"  name="submitform" ><tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="6%">手机:</td>
          <td width="21%"><input name="mo" type="text" class="inp" id="mo" size="17" /></td>
          <td width="8%" align="right">邮箱:</td>
          <td width="21%"><input name="email" type="text" class="inp" id="email" size="17" /></td>
          <td width="44%"><span class="gray"></span></td>
        </tr>
      </table></td>
      </tr>
    <tr>
      <td height="90" align="left">
        <textarea name="bak" cols="80" rows="5" class="lab" id="bak1"></textarea></td>
      </tr>
    <tr>
      <td><input name="button" type="button" class="but" id="buttonajax" value="提交留言" />
        <span class="gray">        </span></td>
      </tr>
    
 </form>

</span></td>
      </tr>
      <input name="lid" type="hidden" value="5976908" />
          <input name="cityid" type="hidden" value="1208" />
          <input name="cityareaid" type="hidden" value="1209" />
          <input name="fanginfo" type="hidden" value="宇洋西海广场" />
      </form>

$('#buttonajax').click(function(){
 //alert($(this).val());
 //checkem();
 var postData = $('#submitform').serialize();
 //alert(postData);
 $.ajax({
  type: "POST",
  url: "/postajax.php",
  data: postData,
  success: function(msg){
   //alert(msg);
   if(msg==1){
    alert('您的主题素材已交付成功!');    
   
   }
  }
 });
})

$('#buttonajax').click(function(){
 //alert($(this).val());
 //checkem();
 var postData = $('#submitform').serialize();
 //alert(postData);
 $.ajax({
  type: "POST",
  url: "/xxxx.php",
  data: postData,
  success: function(msg){
   //alert(msg);
   if(msg==1){
    alert('您的主题材料已提交成功!');
    $('#bak1').val('');
    $('#mo').val('');
   
   }else if(msg==-1){
    alert('您的主题素材提交失利,请认真填写提交内容!');
   
   }else if(msg==-2){
    alert('请输入正确手提式有线电电话机号码!');
   }
   else if(msg==-3){
    alert('对不起,你提交的原委中有越轨字符!');
   }
   else if( msg== -4 )
   {
    alert('对不起,您己提交此主题材料,请不要再一次提交!');
   }
   else
   {
    alert('对不起,系统忙请稍后再试!');
   }
  }
 });
})

XMLHttpRequest 代码如下 复制代码...

ajax表单验证实例吧,希望对各位朋友有赞助。...

本文由六合联盟网发布于系统操作,转载请注明出处:js原生态ajax创设方法介绍,JQuery中ajax异步验证表

关键词: