简单的ajax数据传输和获取例子

发布时间：2020-12-16 01:40:50 所属栏目：百科来源：网络整理

导读：htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf8" /titleUntitled Document/titlescript type="text/javascript" src="js/jquery.min.js"/script/headbodypajax提交信息*************************************************/pform

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<p>ajax提交信息*************************************************</p>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>

    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>    
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>

<div>
  <p>ajax获取的个人信息*************************************************</p>
  <p id="list"></p>
</div>

<script language="javascript">
function checkemail(){
  var email = $('#email').val();
  var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  else if(!reg.test(email)) {
    $('#msg').html("illegal email!");
    $('#email').focus;
    return false;
  }

  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}
//ajax提交数据
function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },"text");//这里返回的类型有：json,html,xml,text
}

//ajax获取数据
$(function () {  
  $.ajax({  
     url: 'down.php',type: 'GET',dataType: 'json',timeout: 1000,cache: false,beforeSend: LoadFunction,//加载执行方法    
     error: erryFunction,//错误执行方法    
     success: succFunction //成功执行方法    
  })  
  function LoadFunction() {  
     $("#list").html('加载中...');  
  }  
  function erryFunction() {  
     alert("error");  
  }  
  function succFunction(tt) {  
     $("#list").html('');
     //eval将字符串转成对象数组  
     //var json = { "id": name": "yangyurong","old": "24" };  
     //json = eval(json);  
     //alert("===name=" + json.uname + ",old=" + json.old);  
     var json = eval(tt); //数组         
     //$.each(json,function (index,item) {  
         //获取数据    
         var name = json.name;  
         var old = json.old;
         $("#list").html(name + " - " + old);  
     //});  
  }  
  }); 
</script>

</body>
</html>

action.php

<span style="font-size:14px;"><?php
  $email = $_POST["email"];
  $address = $_POST["address"];
  //echo $email;
  //echo $address;
  echo "success<br />";
?></span>

down.php

<?php
  $arr = array ('name' => '杨蓉蓉','old' => '24');
  echo json_encode($arr);
?>

$.ajax方法详解，点击看文章

demo下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!