ajax提交表單php,ajax提交表單後生成表格

本文目錄一覽：

• 1、thinkphp裏面的ajax關於表單提交的寫法
• 2、做一個註冊界面，用ajax提交form表單，php得到數據。求詳細程序
• 3、php ajax提交表單
• 4、用js自寫ajax提交表單數據到php，但是php的$_POST為空？
• 5、ajax提交表單文件，判斷文件大小，類型，PHP後台

thinkphp裏面的ajax關於表單提交的寫法

html

head

script type=”text/javascript” src=”__PUBLIC__/js/jquery-1.7.1.min.js”/script

script type=”text/javascript”

  $(function(){

    $(‘input:button’).click(function(){

      var $title=$(‘input[name=”title”]’).val();

      var $message=$(‘input[name=”message”]’).val();

      $mess=$(‘#mess’);

      $.getJSON(‘__URL__/add’,{title:$title,message:$message},function(json){

        //alert(json);return false;

        if(json.status==1){

          $mess.slideDown(3000,function(){

            $mess.css(‘display’,’block’);  

          }).html(‘標題為’+json.data.title+’信息為’+json.data.message);  

        }else{

          $mess.slideDown(3000,function(){

            $mess.css(‘display’,’block’);  

          }).html(‘信息添加失敗，請檢查’);  

        }    

      });

    })  

  })

/script

/head

body

div style=”display:none; color:red;” id=”mess”/div

form action=”” method=”get”

 標題：input type=”text” name=”title” /br /

 信息：input type=”text” name=”message” /br /

    input type=”button” value=”提交” /

/form

/body

/html

上面是前段代碼

MessageAction.class.php頁面代碼如下：

?php

class MessageAction extends Action{

  function index(){

    $this-display();  

  }

  function add(){

    //ajaxReturn(數據,’提示信息’,狀態)  

    $m=M(‘message’);

    if($m-add($_GET)){

      $this-ajaxReturn($_GET,’添加信息成功’,1);

    }else{

      $this-ajaxReturn(0,’添加信息失敗’,0);  

    }

  }

}

?

做一個註冊界面，用ajax提交form表單，php得到數據。求詳細程序

做驗證吧，用jquery 我的代碼粘貼給你

//ajax處理註冊

$(function(){

$(“[name=’username’]”).blur(function(){

var s=$(“[name=’username’]”).val();

$.post(“regajax.php”,{name:’username’,value:s}, function(data){

$(‘#chkuser’).html(data);

});

});

?php

define(‘ACC’,true);

header(“Content-Type: text/html;charset=utf-8”);

header(“Cache-Control:no-cache”);

include(‘../include/init.php’);

$type=$_POST[‘name’];

$value=$_POST[‘value’];

$reg=new regmod();

if ($type==’username’) {

$info=”;

if ($value==”) {

$info= “用戶名不能為空”;

}

else if (strlen($value)3 || strlen($value)16) {

$info= “用戶名必須在3到16個字符之間”;

}

else if ($reg-ajax($value)) {

$info=”用戶名已經存在”;

}

echo $info;

}

php ajax提交表單

1、按鈕 #dosubmit 點擊事件觸發函數 browseFolder，沒有定義。

2、按鈕 #dosubmit 是沒有 submit 事件的，只有表單有，所以你給它綁定 submit 事件是沒有用的。

解決辦法：

// 定義按鈕 #dosubmit 點擊事件的觸發函數 browserFolder 即可。

function browserFolder(){

    // 這裡執行 ajax 

    $.ajax({

        // code here

    });

}

用js自寫ajax提交表單數據到php，但是php的$_POST為空？

注意到的RequestMethod是Undefined，這個地方應該是POST。

可以：

1、把AJAX提交的方式設置為post

2、最好把表單的method設為post，method=”post”

ajax提交表單文件，判斷文件大小，類型，PHP後台

您好，第一步，創建一個表單HTML頁面

這裡，我們只展示主要的表單部分HTML結構代碼：

複製代碼代碼如下:

div id=”contact_form”

form name=”contact” method=”post” action=””

fieldset

label for=”name” id=”name_label”姓名/label

input type=”text” name=”name” id=”name” size=”30″ value=”” class=”text-input” /

label class=”error” for=”name” id=”name_error”此項必填/label

label for=”email” id=”email_label”您的Email/label

input type=”text” name=”email” id=”email” size=”30″ value=”” class=”text-input” /

label class=”error” for=”email” id=”email_error”此項必填/label

label for=”phone” id=”phone_label”您的聯繫電話/label

input type=”text” name=”phone” id=”phone” size=”30″ value=”” class=”text-input” /

label class=”error” for=”phone” id=”phone_error”此項必填/label

br /

input type=”submit” name=”submit” class=”button” id=”submit_btn” value=”我要發送” /

/fieldset

/form

/div

幾點注意：

這裡用一個id為contact_form來包含整個包含信息；這是有意義的，稍後在JavaScript與用戶交互信息的時候會用到。

大家應該注意到了，這裡form標籤的屬性裏面既包含了method和action；這個意義其實不大，因為Javascript直接操作DOM，所以沒有這兩個屬性也是可以的；

務必要給用戶輸入的input標籤加獨立的id，這和第二點原理類似。否則，無法看到正常的效果。

第二步，開始添加JQuery代碼

這裡假設你已經從JQuery官方網站上下載了JQuery基庫，然後上傳到了你的WEB服務器，並添加到你要使用的網頁中了。

現在另外新建一個JS文件，添加如下代碼：

複製代碼代碼如下:

$(function() {

$(“.button”).click(function() {

// 處理表單驗證和交給後台處理的邏輯

});

});

第一行的function()函數與Jquery的document.ready函數用法和功能相同，都是在DOM準備完畢後自動觸發。

第二行裏面是一個單擊觸發函數click()，需要注意的是，在HTML一頁提交按鈕上需要放置一個名為「button」的Class，以模擬實現submi提交表單的功能.

從第二點我們可以看出，JQuery可以很好的將結構和邏輯分離。

第三步，編寫驗證代碼

在實際應用中，這一步是必不可少的。在用戶漏填，錯填某個項目時，及時提示。

複製代碼代碼如下:

$(function() {

$(‘.error’).hide();

$(“.button”).click(function() {

// 驗證代碼

$(‘.error’).hide();

var name = $(“input#name”).val();

if (name == “”) {

$(“label#name_error”).show();

$(“input#name”).focus();

return false;

}

var email = $(“input#email”).val();

if (email == “”) {

$(“label#email_error”).show();

$(“input#email”).focus();

return false;

}

var phone = $(“input#phone”).val();

if (phone == “”) {

$(“label#phone_error”).show();

$(“input#phone”).focus();

return false;

}

});

});

幾點注意：

第2行，我們添加一個$(‘.error’).hide()是為了在用戶未輸入任何信息時隱藏三個class=”error”提示錯誤的label標籤。而只有當出現錯誤，即為空時，錯誤才會出現。（因為有return false的作用，每次僅會出現一個錯誤）

在JQuery裏面，獲取DOM中某個ID或者Class的值非常簡單

複製代碼代碼如下:

//獲取id的值

var name = $(“input#name”).val();

//獲取class序號為1的值

var name = $(“.name”)[1].val();

現假設用戶沒有輸入姓名，處理邏輯應該是：首先顯示錯誤，然後將焦點定位在姓名上。

if (name == “”) { //用戶名為空

$(“label#name_error”).show(); //錯誤提示

$(“input#name”).focus(); //焦點定位

return false; //返回

}

在必填的字段上驗證時，都必須return false，否則會出現必填項未填完即提交的情況。

第四步，通過Jquery的Ajax函數提交表單信息。

這是本教程實現無刷新提交的核心步驟，通過ajax函數來遞交javascript從DOM中獲取的表單項值，然後異步提交給後台處理程序（process.php），並發送Email。此步緊接在驗證程序之後：

複製代碼代碼如下:

var dataString = ‘name=’+ name + ’email=’ + email + ‘phone=’ + phone;

//alert (dataString);return false;

$.ajax({

type: “POST”,

url: “bin/process.php”,

data: dataString,

success: function() {

$(‘#contact_form’).html(“div id=’message’/div”);

$(‘#message’).html(“h2聯繫方式已成功提交！/h2”)

.append(“pScript by Code52.net/p”)

.hide()

.fadeIn(1500, function() {

$(‘#message’).append(“img id=’checkmark’ src=’images/check.png’ /”);

});

}

});

return false;

以上代碼的核心函數是.ajax() ，它所起得作用就是使用POST方式將已經獲取的表單信息(dataString)異步傳送給所定義的後台PHP url(bin/process.php)。如果數據成功傳送，它會將一系列我們定義好的信息返回給用戶。最後return false，這樣是為了防止頁面重新加載。

除了返回成功信息和發送郵件外，我們還可以做其他一些更廣泛的事情。比如，將獲得的數據交由後台腳本處理時，將數據插入數據庫中，然後再將用戶提交的信息返回。

詳細解釋：

首先，獲取表單項的值，方法我們已經在第三步中提到過了：

var name = $(“input#name”).val();

var email = $(“input#email”).val();

var phone = $(“input#phone”).val();

//將表單項的值組合成一個字符串

var dataString = ‘name=’+ name + ’email=’ + email + ‘phone=’ + phone;

將此組合字符串的值通過AJAX函數傳遞給後台url，如果成功，則會返回成功信息給用戶：

複製代碼代碼如下:

$.ajax({

type: “POST”,

url: “bin/process.php”,

data: dataString,

success: function() {

$(‘#contact_form’).html(“div id=’message’/div”);

$(‘#message’).html(“h2Contact Form Submitted!/h2”)

.append(“pWe will be in touch soon./p”)

.hide()

.fadeIn(1500, function() {

$(‘#message’).append(“img id=’checkmark’ src=’images/check.png’ /”);

});

}

});

return false;

在本示例中，ajax函數的功能就只有這些了，如果你需要進一步關於ajax函數的信息，可以參考官方文檔：jQuery’s documentation on the ajax function

第五步，反饋信息給用戶的部分

首先，在信息提交成功之後，JQuery會通過以下部分動態的替換掉div id=”contact_form”/form中的內容，只需要簡單的一句話即可實現。

$(‘#contact_form’).html(“div id=’message’/div”);

所以請大家記住，如果你以後需要通過JavaScript動態的替換掉某個層或者span，可以使用Jquery的.html方法實現，非常簡單和方便。

其次，有了這個層肯定還不夠，因為裏面還沒有內容，所以，我們還要給id=message的這個層添加一些顯示內容：

$(‘#message’).html(“h2聯繫方式已成功提交！/h2”)

同樣是動態的為id為message的層添加了一段html用於提示。還可以利用append方法在message層中追加一句：

.append(“pWe will be in touch soon./p”)

最後，為了表現出提交之後，服務器處理的動態效果，我們設置了以下特效代碼：

.hide() //整個層消失

.fadeIn(1500, function() {//在1500毫秒內逐漸出現

//最後再動態追加一個成功圖標

$(‘#message’).append(“img id=’checkmark’ src=’images/check.png’ /”);

});