ajax与php总结

最新推荐文章于 2021-12-28 20:09:43 发布

小红红的小灰灰

最新推荐文章于 2021-12-28 20:09:43 发布

阅读量396

点赞数

分类专栏： php 文章标签： php ajax web前端

本文链接：https://blog.csdn.net/echoerror/article/details/50886393

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

ajax本人搞了一种原生写法，一种jq写法（ps:来自本人的实体网站）

（1）jquery写法

  			  <form class="formstyle" id="formstyle" method="post" name="formName">
  			  <input type="text" name="name"  placeholder="请输入你的姓名"/>
  			  <input type="text" name="number"  placeholder="请输入你的学号"/>
  			  <input type="text" name="email"  placeholder="请输入你的邮箱"/>
  			  <textarea type="text" name="why" placeholder="请输入加入gis小组的理由"></textarea>
  			  <input type="button" style="background:url(images/ok.jpg)" id="submitBtn"/>
          		</form>
        		  <span id="tishi"></span>

这是form表单

        <script type="text/javascript">
          $(function(){
            $("#submitBtn").click(function(){
              var params=$('input，textaera').serialize();//得到input和textarea中的值，本人就在这里出现错误
              var url="join.php";//需要执行的后台文件

              $.ajax({
                type:"POST",   //方法
                url: url,      //文件路径
                dataType:"json",//用的是什么字符，json字符在js中相当有优势
                data:params,//要传送的数据
                async:true,//是否同步或者异步
                success:function(msg){//查错
                  // alert(msg);
                  // document.write(msg);
                  // var tishi="你提交的姓名为"+msg.name;
                  //$("#tishi").html(tishi);
                },
                error: function () {
                alert("ajax有错！");
              }
              });
            });
          });
        </script>

这是后台文件

include('connect.php');
$name=$_POST["name"];
//echo $name;
$number=$_POST["number"];
//echo $number;
$email=$_POST["email"];
//echo $email;
$reason=$_POST["why"];
//echo $reason;
$flag=0;
$sql="insert into apply(ApplyName,ApplyNumber,ApplyReason,ApplyEmail,TandF)value('$name','$number','$reason','$email','$flag')";
$result=mysqli_query($mysqli,$sql);

（2）js原生写法

   <div class="date">
        <div style="width:970px; margin:10px auto;"><!----> 
            <input class="laydate-icon" id="laydate-icon" name="laydate-icon" onClick="laydate()" /><br><br><br>
            <input type="button"  value="确定" onClick="show()">   </br>
        </div>
    </div>
<p>
<div id="searchresult"></div>
</p>
<script>
;!function(){
laydate({
   elem: '#demo'
})
}();

    
    var xmlHttp;
    function show(){
        var str = document.getElementById('laydate-icon').value;/从表单中获得这个空的参数，因为我的这个日期的控件和onclick还有onchange冲突
        xmlHttp=GetXmlHttpObject();//创建一个xmlhttp对象
        if(xmlHttp==null){
            alert("borwser does not support http request");
            return;
        }
        //alert(str);
        var url="getinformation.php";//后台执行文件
        url=url+"?laydate-icon="+str+"&ra=";//从表单获取的数据
        url=url+Math.random();//在尾部夹一个随机数，以免缓存冲突
        xmlHttp.onreadystatechange=stateChange;//<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">readyState 改变时，就会触发 onreadystatechange 事件</span>
        xmlHttp.open("GET",url,true);//向后台传递参数
        xmlHttp.send();
    }
    function stateChange(){
        if(xmlHttp.readyState==4||xmlHttp.readyState=="complete"){//404代表错误200表示成功
            //alert(xmlHttp.responseText);
            document.getElementById("searchresult").innerHTML=xmlHttp.responseText;//从后台获取的数据在searchreault中显示出来
        }
    }
    function GetXmlHttpObject(){//在不同的浏览器中创建不同的xmlhttp对象
        var xmlHttp=null;
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
            }
            catch(e){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
</script>

以上就是js和jquery的两种写法

下面总结下以下几个关键词，在w3c上也有

readyState：

表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；

1：open方法成功调用，但Sendf方法未调用；

2：send方法已经调用，尚未开始接受数据；

3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；

4：完成，即响应数据接受完成。

Onreadystatechange：

请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。

responseText：

服务器响应的文本内容