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

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

  1. <html>
  2. <body>
  3. <form action="1.php" method="post">
  4. name:<input type="text" name="username" id="username">
  5. rename:<input type="text" name="username1" id="username1">
  6. <input type="button" value="submit" on CliCk="get()">
  7. </form>
  8. </body>
  9. </html>

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

  1. <script language='JavaScript'>
  2. function get()
  3. {
  4. var n=document.getElementById('username').value;
  5. alert (n);
  6. }</script>

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

  1. <script language='JavaScript'>
  2. function get()
  3. {
  4. var n=document.getElementById('username').value;
  5. document.getElementById("username1").value=n;
  6. }</script>

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

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

  1. <?php
  2. $name=$_REQUEST["username"];
  3. echo $name;
  4. ?>

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的值也可传到想要的地方。

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

  1. [Node.js与数据库]node-mysql 模块介绍

    [Node.js与数据库]node-mysql 模块介绍   转载至:https://itbilu.com/nodejs/npm/NyPG8LhlW.html#multiple-statement-q ...

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

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

  3. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  4. js类似新闻图片轮换(带有文字介绍,其实可以放任何内容)

    js类似新闻图片轮换(带有文字介绍,其实可以放任何内容) 主要是利用style="display:block;" 属性<script language="javas ...

  5. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  6. jsp js action之间的传值

    1.struts2 action如何向JSP的JS函数传值 action中定义变量public class TestAction extends ActionSupport implements Se ...

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

    现在有很多的应用已经采用了WebView和html语言结合的开发模式.html5一直很火因为一份代码可以在多个平台上运用啊,效果各不相同都很美观,也越来越有一些公司直接招后台程序员和html5程序员, ...

  8. js中的json对象详细介绍

    JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...

  9. JS中令人发指的valueOf方法介绍

    彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下: 15.2.4.4 Object.prototype.valueOf ( ) When the ...

随机推荐

  1. DataGridView单元格显示GIF图片

    本文转载:http://home.cnblogs.com/group/topic/40730.html DataGridView单元格显示GIF图片 gifanimationindatagrid.ra ...

  2. HubbleDotNet 学习之路

    1.创建后台任务实现自动同步更新表数据.打开工具后点击“management”选项卡,选择“task scheduler management”,在弹出的窗口中点击右侧的"add" ...

  3. hdu 5452 Minimum Cut 树形dp

    Minimum Cut Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=54 ...

  4. JNI总结(一)

    JNI 是 Java平台中的一个强大特性.应用程序能够通过 JNI把 C/C++代码集成进 Java程序中.通过 JNI.开发人员在利用 Java平台强大功能的同一时候,又不必放弃对原有代码的投资.由 ...

  5. FloatingWindow

    https://github.com/dev0x10/android-bubble https://github.com/dev0x10/FloatingView https://github.com ...

  6. Nginx+tomcat 做负载均衡

    架构描述 前端一台nginx服务器做负载均衡器,后端放N台tomcat组成集群处理服务,通过nginx转发到后面(注:没做动静分离,静态动态全部都转给tomcat) 优点:实现了可弹性化的架构,在压力 ...

  7. hdu 4044 GeoDefense (树形dp | 多叉树转二叉树)

    题目链接:hdu-4044 题意 这是一个塔防游戏,地图是一个n个编号为1-n的节点的树, 节点1是敌人的基地,其他叶子节点都是你的基地.    敌人的基地会源源不断地出来怪兽,为了防止敌人攻进你的基 ...

  8. Android 导入导出CSV,xls文件 .

    1 . http://www.bangchui.org/read.php?tid=62 2 .http://blog.csdn.net/xinzheng_wang/article/details/77 ...

  9. Android界面刷新

    Android的invalidate与postInvalidate都是用来刷新界面的,用法区别在于: 1)invalidate():实例化一个Handler对象,并重写handleMessage方法调 ...

  10. Javascript日期处理类库Moment.js

    1.组件详情地址Moment.js中文网 http://momentjs.cn/ 2.几个方法: (1) 日期格式化 moment().format(); // 2016-02-29T14:03:30 ...