GVKun编程网logo

微信小程序 PHP后端form表单提交实例详解（微信小程序php后端接口）

8

对于想了解微信小程序PHP后端form表单提交实例详解的读者，本文将是一篇不可错过的文章，我们将详细介绍微信小程序php后端接口，并且为您提供关于AJAXPHP无刷新form表单提交、AJAXPHP无

对于想了解微信小程序 PHP后端form表单提交实例详解的读者，本文将是一篇不可错过的文章，我们将详细介绍微信小程序php后端接口，并且为您提供关于AJAX PHP无刷新form表单提交、AJAX PHP无刷新form表单提交的简单实现(推荐)、Ajax提交form表单的实例详解（附代码）、AngularJS表单提交实例详解的有价值信息。

本文目录一览：

微信小程序 PHP后端form表单提交实例详解（微信小程序php后端接口）

微信小程序 PHP后端form表单提交实例详解（微信小程序php后端接口）

微信小程序 PHP后端form表单@H_301_2@

1.小程序相对于之前的WEB+PHP建站来说@H_301_2@，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。

2.昨天写了登录注册、忘记密码功能，他们实质上都是一个表单提交操作。@H_301_2@因此就拿注册功能来写这个例子。

3.目录图@H_301_2@

  1. js文件是逻辑控制，主要是它发送请求和接收数据，
  2. json 用于此页面局部 配置并且覆盖全局app.json配置，
  3. wxss用于页面的样式设置，
  4. wxml就是页面，相当于html

4.样式和json文件暂时不管了，我只是想回顾一下form表单的提交@H_301_2@

5.Wxml文件代码@H_301_2@

rush:xml;">

注册

<view>

<form bindsubmit="formSubmit">

<view&gt;

  <label for="name"&gt;<image src="../../images/phone.png" /></label>

  <input id="name" name="mobile"type="text" placeholder="请输入手机号" />

</view>

<view&gt;

  <label for="password"&gt;<image src="../../images/code.png" /></label>

  <input id="password"type="password" placeholder="请输入验证码" />

  <buttonhover-&gt;<a href="https://www.jb51.cc/tag/huoqu/" target="_blank">获取</a>验证码</button>

</view>

<view&gt;

  <label for="password"&gt;<image src="../../images/password.png" /></label>

  <input id="password" name="password"type="password" placeholder="请设置6-20位登录密码" />

</view>

<view&gt;

  <label for="repassword"&gt;<image src="../../images/password.png" /></label>

  <input id="repassword" name="repassword"type="password" placeholder="请输入确认密码" />

</view>



<buttonformType="submit"&gt;<a href="https://www.jb51.cc/tag/zhuce/" target="_blank">注册</a></button>

<view>

<navigator url="../login/index"&gt;<a href="https://www.jb51.cc/tag/denglu/" target="_blank">登录</a></navigator>

<navigator url="../forget/index"&gt;忘记密码</navigator>

6.其中几个关键点需要理解@H_301_2@

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username']来接收。

C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

注册，这个按钮就是用来开启提交事件的。

7.index.js代码

rush:js;"> Page({

data: {

},formSubmit: function(e) {

if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){

wx.showToast({

title: '手机号码或密码不得为空!',icon: 'loading',duration: 1500

})

setTimeout(function(){

 wx.hid<a href="https://www.jb51.cc/tag/eto/" target="_blank">eto</a>ast()

},2000)

}else if(e.detail.value.mobile.length != 11){

wx.showToast({

title: '请输入11位手机号码!',2000)

}else if(e.detail.value.password.length <6 ||e.detail.value.password.length>20){

wx.showToast({

title: '请输入6-20密码!',2000)

}else if(e.detail.value.password != e.detail.value.repassword){

wx.showToast({

title: '两次密码输入不一致!',2000)

}else{

wx.request({ 

  url: 'https://shop.yunapply.com/home/Login/register',header: { 

   "Content-Type": "application/x-www-form-urlencoded" 

  },method: "POST",data:{mobile:e.detail.value.mobile,password:e.detail.value.password},success: function(res) {

   if(res.data.status == 0){

     wx.showToast({

      title: res.data.info,duration: 1500

     })

   }else{

     wx.showToast({

      title: res.data.info,//这里打印出<a href="https://www.jb51.cc/tag/denglu/" target="_blank">登录</a>成功

      icon: 'success',duration: 1000

     })

   }

  } 

 })

}

},})

8.需要注意的是@H_301_2@

Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果

data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。

formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象

下面是函数的执行，由于验证太多，我只拿一部分出来理解。

rush:js;"> if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){

wx.showToast({

title: '手机号码或密码不得为空!',duration: 1500

})

这里的e，就是当前触发事件的对象，类似于html onclick=“foo(this)”this对象，小程序封装了许多内置的调用方法，e.detail.value.mobile 就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度

showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。

9.重点来了@H_301_2@

rush:js;"> wx.request({ 
  url: 'https://shop.com/home/Login/register',duration: 1000

     })

   }

  },fail:function(){

   wx.showToast({

    title: '服务器网络<a href="https://www.jb51.cc/tag/cuowu/" target="_blank">错误</a>!',duration: 1500

   })

  }  

 })

wx.request({})是小程序发起https请求，注意http是不行的。

这里

a.url是你请求的网址，比如以前在前端，POST表单中action=‘index.PHP'，这里的index.PHP是相对路径，而小程序请求的网址必须是网络绝对路径。

比如：https://shop.com/home/Login/register

b.

rush:js;"> header: { 
"Content-Type": "application/x-www-form-urlencoded"

},

由于POST和GET传送数据的方式不一样，POST的header必须是

GET的header可以是 'Accept': 'application/json'

c.一定要写明method：“POST” 默认是“GET”，保持大写

这里的data就是POST给服务器端的数据 以{name:value}的形式传送

d.成功回调函数

rush:js;"> success: function(res) {

if(res.data.status == 0){

wx.showToast({

title: res.data.info,duration: 1500

})

}else{

wx.showToast({

title: res.data.info,icon: 'success',duration: 1000

})

}

}

e.

f.

rush:js;">

if(res.data.status == 0){

     wx.showToast({

      title: res.data.info,duration: 1000

     })

   }

这里的一段代码是和PHP后端程序有关系的，具体流程是这样的，

1.POST通过数据到https://shop.com/home/Login/register这个接口，用过THINKPHP的就会知道是HOME模块下的Login控制下的register方法

2.register方法根据POST过来的数据，结合数据库进行二次验证，如果操作成功，返回什么，如果操作失败，返回什么

3.后端PHP代码如下：

控制器 LoginController.class.PHP@H_301_2@

create($_POST,4)) { $this->error($User->getError(),'',true); } else { if ($User->register()){ $this->success('注册成功!',true); }else{ $this->error('注册失败!',true); } } } }

模型

usermodel.class.PHP 的register方法

$res = D('User')->add(array(
'mobile'=> $mobile,'password'=>md5($password),'modifytime'=>date("Y-m-d H:i:s")
));

return $res;
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

AJAX PHP无刷新form表单提交

AJAX PHP无刷新form表单提交

原文地址：http://blog.sina.com.cn/s/blog_6513b5cf01013p5q.html



ajax.PHP


<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script language="javascript">
function saveUserInfo()
{
//获取接受返回信息层
var msg = document.getElementByIdx_x("msg");
//获取表单对象和用户信息值
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;
//接收表单的URL地址
var url = "./ajax_output.PHP";
//需要POST的值，把每个变量都通过&来联接
var postStr    = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
//实例化Ajax
//var ajax = InitAjax();

           var ajax = false;
          //开始初始化XMLHttpRequest对象
          if(window.XMLHttpRequest) { //Mozilla 浏览器
                  ajax = new XMLHttpRequest();
                  if (ajax.overrideMimeType) {//设置MiME类别
                          ajax.overrideMimeType("text/xml");
                  }
          }
          else if (window.ActiveXObject) { // IE浏览器
                  try {
                          ajax = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (e) {
                          try {
                                  ajax = new ActiveXObject("Microsoft.XMLHTTP");
                          } catch (e) {}
                  }
          }
          if (!ajax) { // 异常，创建对象实例失败
                  window.alert("不能创建XMLHttpRequest对象实例.");
                  return false;
          }
               
               
               
//通过Post方式打开连接
ajax.open("POST",url,true);
//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送POST数据
ajax.send(postStr);
//获取执行状态
ajax.onreadystatechange = function() {
    //如果执行状态成功，那么就把返回信息写到指定的层里
    if (ajax.readyState == 4 && ajax.status == 200) {
     msg.innerHTML = ajax.responseText;
    }
}
alert (userName);
}
</script>
<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名：<input type="text" id="user_name"name="user_name" /><br />
年龄：<input type="text" name="user_age" /><br />
性别：<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
</body>


ajax_output.PHP

<?PHP
      $username = $_POST['user_name'];
      $userage = $_POST['user_age'];
      $usersex = $_POST['user_sex'];
   echo "$username <br>";
   echo "$userage <br>";
   echo "$usersex <br>";
   $db = new MysqLi('localhost','root','123456','test');
   if(!$db){
    echo "连接失败！";
   }
   $db->query("set names utf8");
   $query = "insert into userinfo(uname,uage,usex) values ('".$username."','".$userage."','".$usersex."')";
   $result = $db->query($query);
   if ($result){
    echo "上传成功！";
   }
   else {
    echo "失败！";
   }
   $db->close();

?>

AJAX PHP无刷新form表单提交的简单实现(推荐)

AJAX PHP无刷新form表单提交的简单实现(推荐)

ajax.PHP：

rush:PHP;"> Untitled Document

<script language="javascript">
function saveUserInfo()
{
//获取接受返回信息层
var msg = document.getElementByIdx_x("msg");

//获取表单对象和用户信息值
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;

//接收表单的URL地址
var url = "./ajax_output.PHP";

//需要POST的值，把每个变量都通过&来联接
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

//实例化Ajax
//var ajax = InitAjax();

  var ajax = false;
 //开始初始化XMLHttpRequest对象
 if(window.XMLHttpRequest) { //Mozilla 浏览器
     ajax = new XMLHttpRequest();
     if (ajax.overrideMimeType) {//设置MiME类别
         ajax.overrideMimeType("text/xml");
     }
 }
 else if (window.ActiveXObject) { // IE浏览器
     try {
         ajax = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
         try {
             ajax = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
     }
 }
 if (!ajax) { // 异常，创建对象实例失败
     window.alert("不能<a href="https://www.jb51.cc/tag/chuangjianXML/" target="_blank">创建XML</a>HttpRequest对象实例.");
     return false;
 }

//通过Post方式打开连接
ajax.open("POST",url,true);

//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//发送POST数据
ajax.send(postStr);

//获取执行状态
ajax.onreadystatechange = function() {
//如果执行状态成功，那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
alert (userName);
}


年龄：
性别：

<input type="button" value="提交表单" onClick="saveUserInfo()">

ajax_output.PHP：

rush:PHP;"> PHP

$username = $_POST['user_name'];
$userage = $_POST['user_age'];
$usersex = $_POST['user_sex'];
echo "$username
";
echo "$userage
";
echo "$usersex
";

$db = new MysqLi('localhost','root','123456','test');
if(!$db){
echo "连接失败！";
}
$db->query("set names utf8");
$query = "insert into userinfo(uname,uage,usex) values ('".$username."','".$userage."','".$usersex."')";
$result = $db->query($query);
if ($result){
echo "上传成功！";
}
else {
echo "失败！";
}
$db->close();

?>

以上这篇AJAX PHP无刷新form表单提交的简单实现(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小编。

总结

以上是小编为你收集整理的AJAX PHP无刷新form表单提交的简单实现(推荐)全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

Ajax提交form表单的实例详解（附代码）

Ajax提交form表单的实例详解（附代码）

这次给大家带来Ajax提交form表单的实例详解（附代码），Ajax提交form表单的注意事项有哪些，下面就是实战案例，一起来看一下。

ajax （ajax开发）

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

学代码的时间也不短了，但是却很少使用ajax，后来特地去了解了一下，以下是作为初用ajax的新人对ajax的看法以及认识。

Ajax，异步请求，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

最近自己测试ajax提交form表单，表单提交有post和get两种使用更多的是post方法，虽然与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下几种情况中，使用 POST 请求更为有效：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

$get方式提交表单

get() 方法通过远程 HTTP GET 请求载入信息

格式

$(selector).get(url,data,success(response,status,xhr),dataType)
登录后复制

比如：

请求 demo.php 网页，传送2个参数，忽略返回值：

$.get("demo.php", { name: "John", time: "2pm" } );

demo.php 是发送请求的URL地址

{ name: “John”, time: “2pm” } 要发送给服务器的数据.

$POST方式提交表单

$.post

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

比如，注册时，验证码的使用

<script>
function redirect(url) {
location.href = url;
}
$("#code_btn").click(function(){
var tel = $("#username").val();
if(tel == ""){
alert("请输入正确的手机号码作为账号进行注册");
$("#username").focus();
return false;
}
if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){
alert("请使用正确的手机号码作为账号进行注册！");
$("#username").focus();
return false;
};
var codeNum = $("#code").val();
$.post( &#39;{APP_PATH}index.php?m=member&c=index&a=public_send_message&#39;, {tel:tel,codeNum:codeNum}, function(result){
// console.log(result);
})
timep(60);
});
function timep(j){
$("#code_btn").attr(&#39;disabled&#39;,"true");
$("#code_btn").val(j+"秒");
time=setInterval(function(){
j=j-1;
$("#code_btn").val(j+"秒");
if(j==0){
$("#code_btn").removeAttr(&#39;disabled&#39;);
clearInterval(time);
j=60;
$("#code_btn").val("点击获取验证码");
}
},1000);
}
</script>
登录后复制

APP_PATH}index.php?m=member&c=index&a=public_send_message 是发送请求的URL地址

{tel:tel,codeNum:codeNum} 是要发送给服务器的数据，以 Key/value 的键值对形式表示。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax获取全国天气预报的API数据

Ajax与JSON数据交互存储

以上就是Ajax提交form表单的实例详解（附代码）的详细内容，更多请关注php中文网其它相关文章！

AngularJS表单提交实例详解

AngularJS表单提交实例详解

本文实例讲述了AngularJS表单提交。分享给大家供大家参考，具体如下：

AngularJS中的数据绑定

AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。

ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。

当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个过程被称作脏检查。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。

借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在视图中实现类自动同步的机制。

我们使用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。

数据模型对象是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。 双向数据绑定意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会一句变化重新渲染。

模块

在AngularJS中，模块是定义应用的最主要的方式。模块包含了主要的应用代码，它允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

rush:js;"> angular.module('myApp',[]);

控制器

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控制器。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

表达式

用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式：{{expression}}。对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的bianl，并进行循环、函数调用、将变量应用到数学表达式中等操作。

本例子采用技术

① 页面使用bootstrap布局，页面是bootstrap的模板

② 前端框架AngularJS

③ 后台使用SpringMVC

整个代码的功能是在输入内容后，提交给后台，后台再返回数据显示到页面，提交时有验证提示。

我在这里列举了三种方式来做这次应用

1.全局作用域的控制器 2.模块划分的控制器 3.将后台请求做成服务抽离出来的控制器

JSP代码：

rush:js;"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 接口测试 nofollow" rel="stylesheet">

认证接口：

required">认证接口必填

数据请求接口：

required">数据请求接口必填
连接测试
{{ansInfo}}

JAVA代码：

rush:java;"> @RequestMapping(value = "testKeep",produces = "text/plain;charset=UTF-8") @ResponseBody public String testKeep(HttpServletRequest request,HttpServletResponse response) { System.out.println(request.getParameter("authData")); System.out.println(request.getParameter("reqData")); JSONObject ja = new JSONObject(); ja.put("a","aaa"); ja.put("b","bbb"); ja.put("c","ccc"); System.out.println("test:"+ja.toString()); return ja.toString(); }

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《》、《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。

我们今天的关于微信小程序 PHP后端form表单提交实例详解和微信小程序php后端接口的分享已经告一段落，感谢您的关注，如果您想了解更多关于AJAX PHP无刷新form表单提交、AJAX PHP无刷新form表单提交的简单实现(推荐)、Ajax提交form表单的实例详解（附代码）、AngularJS表单提交实例详解的相关信息，请在本站查询。

本文标签：

上一篇iphone个版本微信内置浏览器宽高（ios微信内置浏览器）

下一篇PHP：微信小程序 微信支付服务端集成实例详解及源码下载（微信支付php开发流程）

相关文章