post方式提交数据

<!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方式提交数据

最新文章

热门文章