最新需要学习如何使用 POST 提交方法的接口,正好看到了Ajax 版本的感觉不错分享给大家,欢迎高手指点。

<SCRIPT LANGUAGE=”javascript”>

<!–

function saveUserInfo()
{
    //获取接受返回信息层
    var msg = document.getElementById(”msg”);

//获取表单对象和用户信息值
    var f = document.user_info;     
    var userName = f.user_name.value;
    var userAge = f.user_age.value;
    var userSex = f.user_sex.value;

//接收表单的URL地址
    var url = “commit.php”;     
    //需要POST的值,把每个变量都通过&来联接 
    var postStr = “name=”+ userName +”&age=”+ userAge +”&sex=”+ userSex;

//实例化Ajax
    var ajax = null;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
       }
    else if(window.ActiveXObject){
        ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
       }
    else{
        return;
       }

//通过Post方式打开连接
    ajax.open(”POST”, url, true);  
    //定义传输的文件HTTP头信息 
    ajax.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”); 
    //发送POST数据
    ajax.send(postStr);

//返回数据的处理函数
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200){
               msg.innerHTML = ajax.responseText;
            }
      }
}

–>
</SCRIPT>

<form name=”user_info”>
     姓名:<input type=”text” name=”user_name” /><br/>
     年龄:<input type=”text” name=”user_age” /><br/>
     性别:<input type=”text” name=”user_sex” /><br/>
<input type=”button” value=”提交表单” onClick=”saveUserInfo()”>
</form>

//构建一个接受返回信息的层:
<div id=”msg”></div>

:
与get方法比较,post方法可传输大于2K的数据,在Ajax里的应用不同之处在于:”post方法的请求地址与传输的数据是放在两个对象里—-请求地址放在open对象里,传输的数据放在send对象里;并且在传输数据之前定义一个传输文件HTTP头信息(setRequestHeader)”
在commit.php文件里可以用变量$_POST[’name’] ,  $_POST[’age’],    $_POST[’sex’]获得send对象传输的数据.并对数据库进行操作.

Ajax的post方式提交数据的更多相关文章

  1. 前端ajax用post方式提交json数据给后端时,网络报错 415

    项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...

  2. 苹果微信浏览器不能post方式提交数据问题

    form表单中采用post方式提交数据时,在苹果的微信浏览器中无法传递,安卓的可以 如图: 在controller中获取该数据为 null 将表单的提交方式修改为get就能够获取到 现在采用Ajax方 ...

  3. Android 采用post方式提交数据到服务器

    接着上篇<Android 采用get方式提交数据到服务器>,本文来实现采用post方式提交数据到服务器 首先对比一下get方式和post方式: 修改布局: <LinearLayout ...

  4. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  5. Android(java)学习笔记213:开源框架post和get方式提交数据(qq登录案例)

    1.前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...

  6. Android 使用Post方式提交数据(登录)

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

  7. Android 使用Post方式提交数据

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

  8. Android(java)学习笔记156:开源框架post和get方式提交数据(qq登录案例)

    1. 前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2. Android应用会经常使用http协议进行传输,网上会有很 ...

  9. postman 中post方式提交数据

    post方式提交数据时,把参数填写在body中而不是pOST下面的哪一行

随机推荐

  1. SSH框架面试总结----1

    1:struts2的工作流程 1)客户端浏览器发出HTTP请求. 2)根据web.xml配置,HTTP请求会被FilterDispatcher接收. 3)根据struts.xml,找到对应的Actio ...

  2. ubuntu安装easygui模块

    使用pip安装easygui 如果未安装pip,则使用如下命令 sudo apt-get install python-pip 安装完pip后,使用如下命令安装easygui sudo pip ins ...

  3. mysql数据库使用mybatis 插入数据时返回主键

    为了体现题目,特指的是mysql,先贴上代码: <insert id="saveBizProdOrderDetail" useGeneratedKeys="true ...

  4. 配置wamp开发环境之mysql的配置

    此前我已经将wamp配置的Apache.PHP.phpmyadmin全部配置完成,以上三种配置参照 配置wamp开发环境 下面我们来看看mysql的配置,这里用的是mysql5.5.20,下载地址: ...

  5. linux中vim永久显示行号、开启语法高亮

    vim ~/.vimrc 进入insert模式,在最后加二行 syntax on set nu! 保存收工. 设置用视图模式的缩进为4个空格 set smartindent set tabstop=4 ...

  6. python 中 * 与**的使用

    1.参数中使用如果是函数定义中参数前的*表示的是将调用时的多个参数放入元组中,**则表示将调用函数时的关键字参数放入一个字典中 如定义以下函数 def func(*args): print(args) ...

  7. NTC温度采集之数据拟合——freemat软件实现

    在stm32温度采样的过程中,使用到了NTC传感器,上拉接6.2K的电阻,信号给AD采样端口,通过NTC的电阻阻值表中,计算得到下面两端数据,在freemat中实现数据拟合,用于程序中温度和电压信号的 ...

  8. hdu-1231 连续最大子序列(动态规划)

    Time limit1000 ms Memory limit32768 kB 给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ Ni, Ni+1, ..., Nj ...

  9. 《Scrum实战》第3次课【富有成效的每日站会】作业汇总

    1组 崔儒: http://kecyru.blog.163.com/blog/static/2741661732017626101944123/ 2017-07-26 孟帅: http://www.c ...

  10. Oracle 10g Data Pump Expdp/Impdp 详解

    Data Pump 介绍 在第一部分看了2段官网的说明, 可以看出数据泵的工作流程如下: (1)在命令行执行命令 (2)expdp/impd 命令调用DBMS_DATAPUMP PL/SQL包. 这个 ...