最新需要学习如何使用 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. matplotlib绘图股票走势图实践

    导入模块 import pandas as pdimport numpy as npfrom pandas import Series,DataFrameimport matplotlib.pyplo ...

  2. FastJsonUtils工具类

    fastjson是由alibaba开源的一套json处理器.与其他json处理器(如Gson,Jackson等)和其他的Java对象序列化反序列化方式相比,有比较明显的性能优势. 版权声明:本文为博主 ...

  3. 分享几个简单的技巧让你的 vue.js 代码更优雅

    1. watch 与 computed 的巧妙结合 一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ thi ...

  4. win7下设置git客户端

    msysgit官网: http://msysgit.github.io/ 下载msysgit http://msysgit.googlecode.com/files/Git-1.8.5.2-previ ...

  5. Linux性能查看

    1.TOP top  登录后默认按进程的CPU使用情况排序,  按M则按内存使用排序 2. vmstat 2 2 显示系统负载 3. free  -m 查看内存使用情况 4.抓包 tcpdump -i ...

  6. 静态方法中不能使用 $this

    忽略了一个问题,$this 代表当前对象!! 静态方法中应该使用 类名 . self 或者 static 关键字来代替! static public function get_info($id) { ...

  7. 微信小程序开发 -- 获取当前页面路径

    Page.prototype就是this: 你在任何一个Page里面都可以使用route字段和setData()函数: 示例代码: /** * 生命周期函数--监听页面加载 */ onLoad: fu ...

  8. TransH中的Hinge Loss Function

    Hinge Loss Function Hinge Loss 函数一种目标函数,有时也叫max-margin objective. 在Trans系列中,有一个 \[ \max(0,f(h,r,t) + ...

  9. 聊聊、Nginx 参数合法性

    我们接着上篇文章来讲讲 ngx_get_options 函数. 这个函数就在 nginx.c 文件中,我们来看看. 参数 argc,argv 我们在前面的文章中都已经提到了,在这里我们看 ngx_ge ...

  10. Django多变关联、增加数据、删除数据

    建立表之间的关联关系: models.py里面对表的字段及外键关系的设置如下: from django.db import models # Create your models here. #出版社 ...