码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 中 ajax 提交数据应用的一个小demo

时间:2014-08-04 10:39:57      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   os   strong   io   文件   

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ...

 

ajax02.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

 

<div id="form">

 

         <p>用户名 <input type="text" name="username" id="username"></p>

         <p>密  码 <input type="password" name="password" id="password"></p>

         <p> <input type="button" value="ajax提交" id="btn"> </p>

 

</div>

 

 

</body>

</html>

 

<script src="jquery-1.8.2.min.js"></script>

<script>

 

$(function(){

       //点击提交按钮那么执行 ajax 操作 

       $(‘#btn‘).click(function(){

         

      /* 获取要提交到服务器的数据也就是 每个表单的值 ,使用对象的方式来保存,

      如果是表单比较多的时候那么这时候我们可以用到jquery的一个方法来帮我们实现表单序列化: var data= $("#form").serialize(); 如果使用了serialize 这个方法那么请把 div 改成 form 元素这样才能实现功能 */

 

        var data = {"username":$(‘#username‘).val(),"password":$(‘#password‘).val()};

 

        $.ajax({

            //目标文件

            url:‘ajax02.php?t=‘+Math.random(),

            //使用post来提交数据

            type:‘POST‘,

            //要提交的数据

            data:data,

            //如果提交成功的话,那么则弹出提交成功提示

            success:function(){

            alert(‘提交成功!‘);

            }

          })

       });

    

    //ajax发送的时候如果有错误的话那么执行错误提示!

     $(document).ajaxError(function() {

        alert(‘发送失败!!!!!!‘);

      });

 

  });

</script>

 


ajax02.php

<?php 

 

   //利用打印方式来查看是否数据已经提交成功

   print_r($_POST);

 

 ?>

 

在谷歌浏览器的控制台上查看数据是否已经接收

 

bubuko.com,布布扣

jQuery 中 ajax 提交数据应用的一个小demo,布布扣,bubuko.com

jQuery 中 ajax 提交数据应用的一个小demo

标签:style   http   color   使用   os   strong   io   文件   

原文地址:http://www.cnblogs.com/zion0707/p/3889418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!