关于js与php互相传值的介绍【转载+自身总结】

  JS是前台的语言,PHP是后台的语言,初学时会经常出现前后台分不清的情况(我当初就是这样的,现在有时也在犯),我当初的想法是就把前后台当成两个岛,他们是无法跨越的,HTML就像一座桥,当你想要把一座岛上的变量传到另一个岛上,只有借助于这座桥。
我来做个小小的总结吧:

1:HTML中的值如何传到JS,下面假设是文件1.php

<html>
             <body>
                <form action="1.php" method="post">
                     name:<input type="text" name="username" id="username">
                    rename:<input type="text" name="username1" id="username1">
                    <input type="button" value="submit" on CliCk="get()">
               </form>
              </body>
         </html>

JS假如想取文本框中用户输入的name值,这样写

<script language=‘JavaScript‘>
function get()
{
var n=document.getElementById(‘username‘).value;
alert (n);
}</script>

这样的话在有调用JS get()时就会弹出警示框,里面的内容就是name的值。
2:假如说JS中的这个取到的name值要传回rename的文本框中,这样写

<script language=‘JavaScript‘>
function get()
{
   var n=document.getElementById(‘username‘).value;
   document.getElementById("username1").value=n;
}</script>

这样的话在下面调用get()就会自动显示你上面name输入的值。

3:PHP中取页面的值
这个我想大家都会了吧

<?php
$name=$_REQUEST["username"];
echo $name;
?>

4:PHP的值传回页面
在HTML中插入PHP语言,可以调用PHP中变量的值,也可用Smarty(推荐)。Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一。它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑分离。简单的讲,目的就是要使PHP程序员同前端人员分离,使程序员改变程序的逻辑内容不会影响到前端人员的页面设计,前端人员重新修改页面不会影响到程序的程序逻辑,这在多人合作的项目中显的尤为重要。参考百度百科:http://baike.baidu.com/link?url=H_UWgGsEuzkSQl_czIkfWPc0pwf9dQc3X-lXUq5l98UYBqr_MrHftQzkdxr6ZnYI87uF2jksgpetTceUOhW-na
有了以上这些,不管是HTML页面里的值还是JS中变量的值,都可以轻松的传入PHP,当然,PHP的值也可传到想要的地方。

时间: 2024-10-11 23:30:44

关于js与php互相传值的介绍【转载+自身总结】的相关文章

JS 基础知识2 传值和传址

要知道传址跟传址,首先我们先了解下数据值的操作. 1复制:可以把它赋值给一个新的变量 2传递:可以将他传递给一个函数或者方法 3比较:可以与另外一个值比较,判断是否相等 简要介绍下传值: 当一个数据是通过值被操作的,那么关系到的是数据的值,在赋值的过程中,是对实际值进行了COPY,储存在一个变量或者属性或数组中,copy的值与原数据是相互独立的. 当数据通过值传递给一个函数时,数据的一份传递给这个函数,如果函数体修改了这个值,只在函数体受影响,函数外的原数据不受影响. 当一个数据通过值和另外一个

js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

node js 异步执行流程控制模块Async介绍

1.Async介绍 sync是一个流程控制工具包,提供了直接而强大的异步功能.基于Javascript为Node.js设计,同时也可以直接在浏览器中使用. Async提供了大约20个函数,包括常用的 map, reduce, filter, forEach 等,异步流程控制模式包括,串行(series),并行(parallel),瀑布(waterfall)等. 项目地址:https://github.com/caolan/async 2. Async安装 npm install async 3.

JS鼠标滚动插件scrollpath使用介绍

JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有你自己的JS和CSS. prefixfree.min.js和jquery.easing.js可以根据实际情况自己选择. 首先编写好HTML,在一个绝对定位块中分别布好每个块的位置 然后开始根据位置用JS画路径. 定义路径: $.fn.scrollPath("getPath") .moveT

Vue.js父子组件如何传值

https://blog.csdn.net/qq_40259641/article/details/81265950 Vue.js父子组件如何传值 通俗易懂原创 阿猫阿狗哈 发布于2018-07-28 22:04:42 阅读数 14278 收藏展开父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在A

WKWebView与JS交互实战技巧之API介绍

前言 前一章我给大家介绍了iOS与HTML5的交互,用的是UIWebView,今天给大家介绍另外一种基于 iOS 8 新推出的 WKWebView 组件,构建出自己的混合开发框架. WKWebView 简介 WKWebView 是苹果在 iOS 8 中引入的新组件,目的是给出一个新的高性能的 Web View 解决方案,摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题. 苹果将 UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议,引入

UIWebView的应用和其中的JS与OC间传值

现在有很多的应用已经采用了WebView和html语言结合的开发模式.html5一直很火因为一份代码可以在多个平台上运用啊,效果各不相同都很美观,也越来越有一些公司直接招后台程序员和html5程序员,做完的产品再安卓也能用iOS也能用,不用再招双份的工程师了.应用程序一进去就全是UIWebView,里面发个请求到自己用html5做的页面,这就是一个应用!当然今天的主要不是说html5,是说html语言中JS代码和OC代码之间的传值. 先举例一个简单的用法: 我在模仿网易彩票做到设置页面的 常见问

js中关于Blob对象的介绍与使用

blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据. 创建blob对象 创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建. 构造函数接受两个参数: 第一个参数为一个数据序列,可以是任意格式的值. 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决

jsp js action之间的传值

1.struts2 action如何向JSP的JS函数传值 action中定义变量public class TestAction extends ActionSupport implements ServletRequestAware {    private String state = "test";} JSP的JS函数中引用变量<script type=text/javascript>    function getStatus() {        var t =