<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>
            我的第一个ajax
        </title>
        <link href="css/style.css" rel="stylesheet"/>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-1.9.1.min.js"></script>
    </head>
    <body>
<div id="box" style="border:1px solid red;display: block;clear: both; width: 500px; height: 40px; margin:20px auto;">
</div>
        <form id="form">
            <div class="form-group">
                <label>姓名：</label>
                <input type="text" class="form-control " placeholder="姓名" name="user" >
            </div>
            <div class="form-group">
                <label>价格：</label>
                <input type="text" class="form-control" placeholder="价格" name="price" >
            </div>
            
            <div class="form-group">
                <label>描述：</label>
                <textarea class="form-control" rows="3" name="description"></textarea>

</div>
                <div class="form-group">
                <label>上传图片：</label>
           <input type="file"  name="img">
            </div>
            <center>
                <button type="button" class="btn btn-default" name="submit">
                    提交
                </button>
            </center>
            <div class="submit">
                <span class="loading">正在提交...</span>
            </div>
            
        </form>
        
<script>
    $(function() {
        $('form button[type=button]').click(function() {
            $.ajax({
                type: "POST",
                url: "formtest.php",
                // 表单序列化
                data: $('form').serialize(),
                success: function(response, status, xhr) {
                    $('#box').html(response);
                },
                error: function(xhr, errorText, erroType) {
                    //alert('错误');
                    //alert(errorText+":"+erroType);
                    alert(xhr.status + ":" + xhr.statusText);
                }
            });
        }); //            $('form button[type=button]').click(function() {
        //                    $.ajax({
        //                        type: "POST",
        //                        url: "formtest.php",
        //                        //param() 方法用于在内部将元素值转换为序列化的字符串表示
        //                        data:$.param({
        //                            user:$('form input[name=user]').val(),
        //                            price:$('form input[name=price]').val(),
        //                            description:$('form textarea[name=description]').val()
        //                        }),
        //                        success: function(response, status, xhr) {
        //                            $('#box').html(response);
        //                        },
        //                       error: function(xhr,errorText,erroType) {
        //                    //alert('错误');
        //                    //alert(errorText+":"+erroType);
        //                    alert(xhr.status+":"+xhr.statusText);
        //                }
        //                    });
        //                });
        $(document).ajaxStart(function() {
            $('.loading').show();
        }).ajaxStop(function() {
            $('.loading').hide();
        });

})
</script>

</body>
</html>

formtest.php

<?php

echo $_POST['user']."-".$_POST['price']."-".$_POST['description'];

?>

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

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

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

  2. Android（java）学习笔记213：开源框架post和get方式提交数据（qq登录案例）

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

  3. Android 使用Post方式提交数据（登录）

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

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

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

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

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

  6. Android（java）学习笔记156：开源框架post和get方式提交数据（qq登录案例）

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

  7. postman 中post方式提交数据

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

  8. Android 采用get方式提交数据到服务器

    首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import ja ...

  9. JQuery以JSON方式提交数据到服务端

    JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面 ...

  10. easyui form 方式提交数据

    http://ldzyz007.iteye.com/blog/2067540 <form id="ff" method="post">      . ...

随机推荐

  1. c++对象的生命周期

    C++ 的new 运算子和C 的malloc 函数都是为了配置内存,但前者比之后者的优点是,new 不但配置对象所需的内存空间时,同时会引发构造式的执行. 所谓构造式(constructor),就是对 ...

  2. sql语句建表，并且自增加主键

    sql语句建表,并且自增加主键 use [test] CREATE TABLE [dbo].[Table_4] ( [userid] [int] IDENTITY(1,1) NOT NULL, CON ...

  3. 【Python学习】记一次开源博客系统Blog_mini源码学习历程-Flask

    今天准备看看Flask框架,找到一套博客系统源码,拿来学习学习 https://github.com/xpleaf/Blog_mini 演示地址 http://140.143.205.19 技术框架 ...

  4. 浅析TCP字节流与UDP数据报的区别

    转自http://www.linuxidc.com/Linux/2014-11/109545.htm “TCP是一种流模式的协议,UDP是一种数据报模式的协议”,这句话相信大家对这句话已经耳熟能详~但 ...

  5. 【python3】Mac下selenium3＋chrome驱动＋python3

    环境: python3.6.4  seleinum3.11 事先准备好python3  环境.安装谷歌浏览器 1 安装seleinum pip3 install selenium 2 安装chrome ...

  6. springboot---->集成mybatis开发（二）

    这里面我们介绍一下springboot集成mybatis完成一对多数据和一对一数据的功能.任何一个人离开你 都并非突然做的决定 人心是慢慢变冷 树叶是渐渐变黄 故事是缓缓写到结局 而爱是因为失望太多 ...

  7. hibernate annotation多对多中间表添加其他字段的第三种方法

    本示例主要以学生(T_Student)和课程(T_Course)之间的多对多关系,中间表Score(分数),学生表和课程表是多对多关系,另外为他们的关系添加额外的字段---分数: T_Student类 ...

  8. 【Spring Boot && Spring Cloud系列】在spring-data-Redis中如何使用切换库

    前言 Redis默认有16个库,默认连接的是index=0的那一个.这16个库直接是相互独立的. 一.在命令行中切换 select 1; 二.在Spring中如何切换 1.在RedisConnecti ...

  9. Entity Framework6的在线下载安装

    Entity Framework6的在线下载安装 Entity Framework 简单介绍: 看名字就知道肯定是关于数据模型的…… Entity Framework:微软官方提供的ORM()工具,O ...

  10. Python 2.7.6 安装lxml模块[ubuntu14.04 LTS]

    lxml --->首字母是字母l,不是数字1 lxml 2.x : https://pypi.python.org/pypi/lxml/2.3 1xml官网:http://lxml.de/ 一 ...