ajax方法二（post数据传输）（伪）

最新推荐文章于 2024-02-23 11:46:43 发布
最新推荐文章于 2024-02-23 11:46:43 发布
阅读量180 收藏
点赞数 1
文章标签： php涉猎 ajax POST方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42275455/article/details/82590761
版权

POST.html页面代码快

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        登陆（login）
    </title>
    <style type="text/css">
        .modal{
            position: fixed;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: rgba(0,0,0,.5);
            z-index: 999;
            display: none;
        }

        .modal div{

            background: #fff;
            width: 260px;
            height: 100px;
            border-radius: 5px;
            margin: 200px auto; 
      }
      .denglu{
        margin-top: 10px;
      }
      button{
        margin: 5px auto;
        margin-left: 115px;
      }
    </style>
</head>
<body>
    <p>请登录！</p>
<div class="modal">
    <div id="nei">
        &nbsp用户名：<input class="denglu" type="text" name="us"><br>
        &nbsp密码：&nbsp<input class="denglu" type="text" name='ps'><br>
        <button>登录</button>
    </div>
</div>
<script type="text/javascript">
    //点击p显示登录窗口
    var p=document.getElementsByTagName('p')[0];
    p.onclick=function () {
        document.getElementsByClassName('modal')[0].style.display="block";
    }
    //显示登录窗口时，点击窗口返回
    var modal=document.getElementsByClassName('modal')[0];
     modal.onclick=function () {
    document.getElementsByClassName('modal')[0].style.display="none"
    }
    var nei=document.getElementById('nei');
     nei.onclick=function (event) {
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3c 标准
        }
        else
        {
            event.cancelBubble = true;  // ie 678  ie浏览器
        }
        document.getElementsByClassName('modal')[0].style.display="block"
    }
    //登陆按钮
    var login=document.getElementsByTagName('button')[0];
    login.onclick=function(){
        var us=document.getElementsByName('us')[0].value;
        var ps=document.getElementsByName('ps')[0].value;
        // console.log(us)
        //发起ajax 请求
        //实例化请求对象
        var xmlhttp;
        if (window.XMLHttpRequest)
  {// code for Fire
  // xmlhttp.onreadystatechange=state_Change;
  // xmlhttp.open("GET",url,true);//方法 地址 数据   同步异步
  // xmlhttp.send(null);fox, Mozilla, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4)
                  {
                  if (xmlhttp.status==200)
                    {
                  //    console.log(xmlhttp.response)
                     // console.log(typeof(xmlhttp.response))
                     var resutlt=JSON.parse(xmlhttp.response);
                     console.log(resutlt)
                     if (resutlt.err==0) {
                        alert(resutlt.msg);
                        document.getElementsByClassName('modal')[0].style.display="none"
                        p.innerHTML="欢迎"+"登陆"+resutlt['us']

                     }
                  else{
                        alert(resutlt.msg);
                     }
                    }
                  }
          };
          var url="http://localhost/8.2/Plogin.php";

      xmlhttp.open("POST",url,true);//方法 地址 数据   同步异步
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")  
      xmlhttp.send("us="+us+"&ps="+ps);
    }
</script>
</body>
</html>
<!-- get方法下如何传递json字符串(地址栏传递参数)
post（send传递参数，设置头文件信息xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")）
验证用户名是否存在
npc -->
<!-- open函数需要自己改“方法 地址 数据” -->

Plogin.php页面代码快

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        登陆（login）
    </title>
    <style type="text/css">
        .modal{
            position: fixed;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: rgba(0,0,0,.5);
            z-index: 999;
            display: none;
        }

        .modal div{

            background: #fff;
            width: 260px;
            height: 100px;
            border-radius: 5px;
            margin: 200px auto; 
      }
      .denglu{
        margin-top: 10px;
      }
      button{
        margin: 5px auto;
        margin-left: 115px;
      }
    </style>
</head>
<body>
    <p>请登录！</p>
<div class="modal">
    <div id="nei">
        &nbsp用户名：<input class="denglu" type="text" name="us"><br>
        &nbsp密码：&nbsp<input class="denglu" type="text" name='ps'><br>
        <button>登录</button>
    </div>
</div>
<script type="text/javascript">
    //点击p显示登录窗口
    var p=document.getElementsByTagName('p')[0];
    p.onclick=function () {
        document.getElementsByClassName('modal')[0].style.display="block";
    }
    //显示登录窗口时，点击窗口返回
    var modal=document.getElementsByClassName('modal')[0];
     modal.onclick=function () {
    document.getElementsByClassName('modal')[0].style.display="none"
    }
    var nei=document.getElementById('nei');
     nei.onclick=function (event) {
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3c 标准
        }
        else
        {
            event.cancelBubble = true;  // ie 678  ie浏览器
        }
        document.getElementsByClassName('modal')[0].style.display="block"
    }
    //登陆按钮
    var login=document.getElementsByTagName('button')[0];
    login.onclick=function(){
        var us=document.getElementsByName('us')[0].value;
        var ps=document.getElementsByName('ps')[0].value;
        // console.log(us)
        //发起ajax 请求
        //实例化请求对象
        var xmlhttp;
        if (window.XMLHttpRequest)
  {// code for Fire
  // xmlhttp.onreadystatechange=state_Change;
  // xmlhttp.open("GET",url,true);//方法 地址 数据   同步异步
  // xmlhttp.send(null);fox, Mozilla, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4)
                  {
                  if (xmlhttp.status==200)
                    {
                  //    console.log(xmlhttp.response)
                     // console.log(typeof(xmlhttp.response))
                     var resutlt=JSON.parse(xmlhttp.response);
                     console.log(resutlt)
                     if (resutlt.err==0) {
                        alert(resutlt.msg);
                        document.getElementsByClassName('modal')[0].style.display="none"
                        p.innerHTML="欢迎"+"登陆"+resutlt['us']

                     }
                  else{
                        alert(resutlt.msg);
                     }
                    }
                  }
          };
          var url="http://localhost/8.2/Plogin.php";

      xmlhttp.open("POST",url,true);//方法 地址 数据   同步异步
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")  
      xmlhttp.send("us="+us+"&ps="+ps);
    }
</script>
</body>
</html>
<!-- get方法下如何传递json字符串(地址栏传递参数)
post（send传递参数，设置头文件信息xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")）
验证用户名是否存在
npc -->
<!-- open函数需要自己改“方法 地址 数据” -->
命名不规范者
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现ajax上传文件加载动画效果（伪百分比加载进度）
马句
09-09 1538
一、实现背景 对于AJAX，异步传输数据，那肯定是要等待服务器的数据返回，对于客户来说，等待文件上传如果文件过大会让他们失去耐心，一种加载动画的方式，可以让客户知道这个文件正在上传需要时间。 二、实现过程 在ajax方法中定义任意位置显示的“加载中。。。”提示 和循环加载动图 $('#ajax_test2').click(function(){ $.ajax({ ...
jsp&ajax学习笔记
weixin_44736938的博客
06-30 1372
jsp&ajax学习笔记
Ajax的post方法的使用
pfpfpfpfpf的专栏
08-02 2万+
刚开始学Ajax，看到很多网上的代码都用Get方法提交参数，Tomcat默认ISO编码实在是让人头痛，对付乱码我都是用过滤器做字符编码过滤的，Get方法过滤器监听不到，所以我一直喜欢使用Post方法，下面对Ajax Get和Post方法做一对比 GET：<!-- var xmlHttpRequest; function createXMLHttpRequest(){ try
jQuery中ajax post方法
weixin_44900249的博客
07-25 393
$.post(‘url路径’,{post要发送的数据},function(res){ console.log(res) 回调函数 })
AJAX实现简单get/post请求
weixin_59528719的博客
02-23 3142
AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。什么是异步，什么是同步？假设有t1和t2线程，t1和t2线程并发，就是异步。假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。AJAX代码属于WEB前端的JS代码。
ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)
hrtc的专栏
12-30 669
看完《征服Ajax - Web20开发技术详解试读版》感觉这本书全是精华，最后的例子也作为我看完此2章的学习总结练习1.frame操作1)父框架到子框架的引用window.frames["frameName"].frames["frameName2"];2)子框架到父框架的引用window.parent3)兄弟框架间的引用在frame1 中可以使用如下语句来引用frame2：self.parent
根据AJAx名称执行Ajax方法
jiang199244的专栏
12-09 746
最近需要做ajax分页，发现自己写的很难看，在网上找了一个JQ分页菜单插件，观看源码，发现是假分页菜单，于是我就修改成真分页菜单，在修改过程中，遇到一个问题 1：我的需求是（根据我传进去的AJAX名称，自动调用该方法）ps：该方法只能有两个参数，当前页数，一页数据条数 var func = eval($AjaxMethods);  new func(page, $Mth);
ajax实例---post方式
Android探索之路
08-19 1687
/** * 使用Ajax和服务器进行通信 * *创建XmlHttpRequest对象 * *打开和服务器的链接 * *发送请求 * *处理服务器的返回信息 * * */ // window.onload=function(){ document.getElementById("ok").onclick=function(){ //1 创建XmlHttpRe
Ajax
SHY
03-05 696
Ajax(Asynchronous Javascript And XML)实现客户端网页请求服务器的数据
Ajax学习全套(最全最经典)
10-21
3. 使用XML和XSLT进行数据交互和操作：XML（可扩展标记语言）用于数据的存储和传输，而XSLT（可扩展样式表语言转换）则用于处理XML数据。 4. 使用XMLHttpRequest对象进行异步数据接收：这是AJAX技术的核心，允许...
axios post封装对象到后端_axios.js以post方式传递数据后台获取不到数据，这到底是什么原因...
weixin_39611765的博客
12-29 241
这篇文章始于自己封装了axios.js的里面的get方法，和post方法首先我们先来看看使用说明 · Axios 中文说明 · 看云​www.kancloud.cnaxios.post()方法axios({method: 'post',url: '/user/123456',data: {username: 'ken',password: '123456'}})axios.post('/user'...
ajax方法一（get方法应用）（假数据传输）
qq_42275455的博客
09-10 894
GET.html页面代码快 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; 登陆（login） &lt;/title&gt; &lt;style type="text/css"&a
ajax编程界面布局及界面元素命名体会
yjg428的专栏
05-21 452
1、区块的显示与隐藏      在进行ajax编程时，经常会用到div标签对页面元素进行布局，大致方法是，把界面分做几大块，有时候需要根据点击菜单显示相应的块及隐藏其他块，这时可简单设置div.style.display为block进行显示，div.style.dispaly为none进行隐藏。2、界面元素命名      首先，界面元素命名是不能重复的，如果必需共享元素名字，则可以在显
Ajax-POST请求
廖若星辰-LTY
09-01 2万+
上文 Ajax-GET请求 已经对Ajax做了简单的介绍，也分享了Ajax中GET数据请求的底层实现以及jQuery封装后的使用方式。那么本文再来记录一下Ajax中POST数据请求方式的底层实现和jQuery封装后的使用。 Ajax最常用的请求服务器方式有GET和POST两种。 GET 请求服务器方式常用于获取服务器数据，而 POST 请求服务器方式常用于向服务器发送数据，可携带参数量较大。本文主要介绍Ajax中的POST请求服务器的原生底层写法和jQuery封装后的用法。 使用XMLHttpRequ
AJAX发送请求(POST方式)
猫猫的小茶馆
05-16 2万+
AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术： 这里介绍一下AJAX发送请求（POST） POST比GET提交方式更安全，不会在网址中显示信息 首先我们看一下效果 常见场景：输入用户名和密码 在用户登录时，这是最常见的用法。接下来，我们看看代码吧。 首先，老规矩，咱们写一个简单的PHP服务 PHP部分 代码如下： &...
绕来绕去，我发现还是得用php
天天的博客
09-25 320
node 也可以用，但是部署起来，我不太会啊， 要是Php 到时可以随便部署！ 废话少说，我们先测试！ 服务器好了，我们就可以用ajax 测试了，为了防止跨域问题，我们将一个页面放入网站内： axios.html 和 index.php 都在一个网站内！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
ajax的post请求方式,ajax的post请求方式
weixin_42519733的博客
08-06 5067
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>This is my JSP pagediv{border: 1px solid red;width:...
ajax通过post方法传数组
热门推荐
feinifi的博客
08-02 10万+
ajax在web项目开发中经常会用到，平时我们传递数据，基本都是一个参数名对应一个参数值，后端通过参数名就可以得到参数，从而进行相关逻辑处理，但是有时候我们会遇到批量操作，比如批量删除一个列表，这时候我们传递的就是一个id的数组，这时候前后端需要对数组传递做一些特别的处理： 第一种方式： 通过ajax一个属性traditional:true来指定参数序列化时，不做深度序列化。 通过JSON....
Ajax技术概述
橘猫吃不胖的博客
02-24 1356
Ajax技术概述1 初识Ajax1.1 传统网站中存在的问题1.2 Ajax的工作原理1.3 同步处理与异步处理1.4 XMLHttpRequest对象2 Ajax基本实现步骤2.1 创建服务器2.2 配置Ajax对象2.3 获取服务器端的响应3 请求参数3.1 GET请求参数的传递3.2 POST请求参数的传递3.3 案例演示4 jQuery对Ajax的封装4.1 $.ajax()方法4.2 Ajax快捷方法4.3 Ajax辅助方法 1 初识Ajax 在传统网站中，网页无法实现局部更新，当用户刷新页面时，
jquery ajax post传输数据
最新发布
03-29
使用jQuery的AJAX方法进行POST数据传输的基本语法如下： ```javascript $.ajax({ url: 'your_url', // 请求的URL地址 type: 'POST', // 请求方式，可以是GET或POST data: {key1: value1, key2: value2}, // 要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值