您的位置:

ajax提交表单php,ajax提交表单后生成表格

本文目录一览:

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' /");

});