通过php jq ajax 提交form表单

参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html

html

<div id="contact_form">    <form name="contact" method="post" >

            <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="button" name="submit" class="button" id="submit_btn" value="我要发送" />

    </form></div>js
<script language="javascript">

    $(function(){        $(".error").hide();        $(".button").click(function(){           var name= $("#name").val();            if(name==""){                $("#name_error").show(3600);                $("#name_error").focus();                return false;                //return false 的作用是为了让input框效果是一次只出现一个                //当type为submit的时候,不return false 的话就会提交form表单而没有效果                //当type为button的时候,不用return false也可以显示效果                //原话:而只有当出现错误,即为空时,错误才会出现,因为有 return false 的作用,每次仅会出现一个错误。            }            var email= $("#email").val();            if(email==""){                $("#email_error").show(3600);                $("#email_error").focus();                return false;            }            var phone= $("#phone").val();            if(phone==""){                $("#phone_error").show(3600);                $("#email_error").focus();                return false;            }

            var dataString = ‘name=‘+ name + ‘&email=‘ + email + ‘&phone=‘ + phone;            //document.write(dataString);            $.ajax({                type: "post",                url:"text7.php",                data:dataString,                success:function(mag){                   // alert(mag);return;                    //ajax提交form表单php里无法看post值,只能在回调函数里面打印,下面为成功之后的返回效果                    $(‘#contact_form‘).html("<div id=‘message‘></div>");                    $("#message").html("<p>联系方式已成功提交!</p>")                            .append("<p>Script design</p>")                            .hide()                            .fadeIn(1500, function() {                                $(‘#message‘).append("<img id=‘checkmark‘ src=‘yes.ico‘ />");                            });                }            })            return false;        })    })</script>
php
print_r($_POST);echo $_POST[‘name‘].‘<br>‘."i‘m ok!~";die;
 
时间: 2024-10-07 05:16:31

通过php jq ajax 提交form表单的相关文章

使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username},

jquery的ajax提交form表单方式总结

方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url: AjaxURL + '?Action=' + 'Submit

ajax提交form表单资料详细汇总

一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统普通的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面. 二.通过ajax提交form实现的登录实例: <body> <h1 align="center">用户登录</h1> &

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正 在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下 背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码 不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传 本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解

第一种方法(简单易用,防蚊虫): 1.1 从form表单到congtroller接收.1 是form表单,2 是ajax提交 3 springmvc接收 1.2 debug 看后台数据,看到了吧,userEO接收到数据了 1.3 有人想看看seralize和seralizeArray数据不同 seralize:id=1&name=xiaohua&age=18&sex=man seralizeArray[ id 1],[ name xiaohua],[ age 18],[ sex m

使用ajax提交form表单,包括ajax文件上传

前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username}, success:function(data){ w

jQuery通过jquery.form.js插件使用AJAX提交Form表单

我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.5.支持提交多种类型数据.如:xml,json等. 主要的函数: 1.ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的ready函数中,使用ajaxForm来为AJAX提交

jquery使用ajax提交form表单

$.ajax({ type: jqform.attr('method'), // 提交方式 get/post url: jqform.attr('action'), // 需要提交的 url data:jqform.serialize(), success: function(json) { // var json = eval('(' + json + ')'); if(json.state) { alert('修改成功!'); ct.assoc.close(); return true; }

Ajax提交form表单

FormData,就是这个,再也不用写一堆js了. var form = new FormData($("#importForm")[0]); //这里为什么要有个[0]呢? 我也不知道 浏览器控制台会报错Unexpected end of JSON input,当时这里卡了好久,大神看到知道的为啥的给说下 $.ajax({ url:"", type:"post", data:form, cache: false, processData:fal