js ajax提交表单和信息并返回值

最新推荐文章于 2022-03-28 14:54:43 发布

三个人工作室

最新推荐文章于 2022-03-28 14:54:43 发布

阅读量963

点赞数

分类专栏： jquery js

js 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

jquery

11 篇文章 0 订阅

订阅专栏

标准的内容：
4.php

<html>
        <head>
                <title>jQuery Ajax 实例演示</title>
                <meta charset="utf-8" />
        </head>
        <script src="templetes/default/js/jquery-1.10.2.min.js"></script>

        <script type="text/javascript">$(document).ready(function() { //这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面
        $("#button_login").mousedown(function() {
                login(); //点击ID为"button_login"的按钮后触发函数 login();
        });
});

function login() { //函数 login();
        var username = $("#username").val(); //取框中的用户名
        var password = $("#password").val(); //取框中的密码
        $.ajax({ //一个Ajax过程
                type: "post", //以post方式与后台沟通
                url: "login.php", //与此php页面沟通
                dataType: 'json', //从php返回的值以 JSON方式 解释
                data: 'username=' + username + '&password=' + password, //发给php的数据有两项，分别是上面传来的u和p
                success: function(json) { //如果调用php成功
                        //alert(json.username+'\n'+json.password); //把php中的返回值（json.username）给 alert出来
                        $('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置
                }
        });
        //$.post()方式：
        $('#test_post').mousedown(function() {
                $.post(
                        'login.php', {
                                username: $('#username').val(),
                                password: $('#password').val()
                        },
                        function(data) //回传函数
                        {
                                var myjson = '';
                                eval('myjson=' + data + ';');
                                $('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
                        }
                );
        });
        //$.get()方式：
        $('#test_get').mousedown(function() {
                $.get(
                        'login.php', {
                                username: $('#username').val(),
                                password: $('#password').val()
                        },
                        function(data) //回传函数
                        {
                                var myjson = '';
                                eval("myjson=" + data + ";");
                                $('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
                        }
                );
        });
}</script>
        <body>
                <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
                <form id="formtest" action="" method="post">
                        <p>
                                <span>输入姓名:</span>
                                <input type="text" name="username" id="username" />
                        </p>
                        <p>
                                <span>输入密码:</span>
                                <input type="text" name="password" id="password" />
                        </p>
                </form>
                <button id="button_login">
                ajax提交
                </button>
                <button id="test_post">
                post提交
                </button>
                <button id="test_get">
                get提交
                </button>
        </body>
</html>

复制代码

提交的函数：

<?php 
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password'])); 
?>

复制代码

以上这种方式是以json方式提交和返回信息，比较繁琐，直接的形式可以进行高速提交。
1.php

<script src="templetes/default/js/jquery-1.10.2.min.js"></script>

<button onclick="postdata();" id="cc" >
        
111
</button>
<span id="aa">1111</span>
<input type="text" placeholder="111" id="writer" />

<script language="javascript">function postdata() { //提交数据函数

        $.ajax({ //调用jquery的ajax方法

                type: "POST", //设置ajax方法提交数据的形式

                url: "2.php", //把数据提交到ok.php

                data: "writer=" + $("#writer").val(), //输入框writer中的值作为提交的数据

                success: function(data) //回传函数
                        {

                                document.getElementById("aa").innerHTML = data;
                        }

        });
        //document.getElementById("cc").innerHTML+="2222";

}</script>

<a href="tel:10086">
        10086
</a>

复制代码
2.php

<meta charset="utf8">
<?php
echo $_POST['writer'];
?>

复制代码

基本格式：

$.ajax({ //调用jquery的ajax方法

                type: "POST", //设置ajax方法提交数据的形式

                url: "2.php", //把数据提交到ok.php

                data: "writer=" + $("#writer").val(), //输入框writer中的值作为提交的数据

                success: function(data) //回传函数
                        {

                                document.getElementById("aa").innerHTML = data;
                        }

        });

复制代码

$.ajax()方法详解
jquery中的ajax方法参数总是记不住，这里记录一下。

1.url: 
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type: 
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout: 
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async: 
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache: 
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data: 
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType: 
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码：
[url=]
[/url]
$(function(){    $('#send').click(function(){         $.ajax({             type: "GET",             url: "test.json",             data: {username("#username").val(), content("#content").val()},             dataType: "json",             success: function(data){                         $('#resText').empty();   //清空resText里面的所有内容                         var html = '';                          $.each(data, function(commentIndex, comment){                               html += '<div class="comment"><h6>' + comment['username']                                         + ':</h6><p class="para"' + comment['content']                                         + '</p></div>';                         });                         $('#resText').html(html);                      }         });    });});[url=]
[/url]


22.顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

http://www.cnblogs.com/tylerdonet/p/3520862.html

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

Ajax提交form表单
http://www.tuicool.com/articles/EjUn63Z
data: $("#studentInfo_form").serialize(),

data: "wyuser="+wyuser+"&txqq="+txqq,

复制代码

提交多个数据
http://blog.sina.com.cn/s/blog_8c137ee30101ajsd.html

uery的ajax()方法提交数组问题

$.ajax({
   type: "POST",
   url: url,
   data:{ gender:[0,1] },
   dataType: "json",
   async:false
  });

复制代码

http://blog.csdn.net/thc1987/article/details/7278269

contentType: "application/json", 
url: "WebService1.asmx/Login", 
data: "{username:'" + username + "',pwd:'" + pwd + "'}",

复制代码

http://www.jb51.net/article/37169.htm

ajax传递多个参数具体实现【json形式】

三个人工作室

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js ajax提交表单和信息并返回值

标准的内容：4.php<html> <head> <title>jQuery Ajax 实例演示</title> <meta charset="utf-8" /> </head> <script src="...
复制链接

扫一扫

专栏目录