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

时间：2022-08-28 00:19:03

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

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

  1. ［Node&period;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&sol;json&period;ashx&quest;的后面加 callback&equals;&quest; 起什么作用 js url&quest;callback&equals;xxx xxx的介绍 ajax 跨域请求时url参数添加callback&equals;&quest;会实现跨域问题

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

  4. js类似新闻图片轮换&lpar;带有文字介绍&comma;其实可以放任何内容&rpar;

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

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

    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. uwsgi出现invalid request block size&colon; 21573 &lpar;max 4096&rpar;&period;&period;&period;skip解决办法

    buffer-size uwsgi内部解析的数据包大小,默认4k. 如果准备接收大请求,你可以增长到64k. 允许uwsgi接收到32k,更大的会被丢弃. xweb.ini [uwsgi]socket ...

  2. js小时分钟控件--

    直接上代码: var str = ""; document.writeln("<div id=\"_contents\" tabindex=99 ...

  3. 重新想象 Windows 8 Store Apps &lpar;46&rpar; - 多线程之线程同步&colon; Lock&comma; Monitor&comma; Interlocked&comma; Mutex&comma; ReaderWriterLock

    [源码下载] 重新想象 Windows 8 Store Apps (46) - 多线程之线程同步: Lock, Monitor, Interlocked, Mutex, ReaderWriterLoc ...

  4. 1763 An Essay towards solving a Problem in the Doctrine of Chances

    https://en.wikipedia.org/wiki/An_Essay_towards_solving_a_Problem_in_the_Doctrine_of_Chances

  5. mysql备份数据库

    需求: 1,每天4点备份mysql数据: 2,为节省空间,删除超过3个月的所有备份数据: 3,删除超过7天的备份数据,保留3个月里的 10号 20号 30号的备份数据: #创建shell文件 vim  ...

  6. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

  7. 手工脱壳之FSG压缩壳-IAT表修复

    目录 一.工具及壳介绍 二.脱壳 2.1.单步跟踪脱壳 2.2.IAT修复 三.程序脱壳后运行截图 四.个人总结 五.附件 一.工具及壳介绍 使用工具:Ollydbg.PEID.ImportREC.L ...

  8. python之装饰器篇

    一.基本装饰器 基本装饰器的作用: 在不改变原函数的基础上, 通过装饰器, 给原函数新增某些功能 实现方法: 在原函数上加 @装饰器名字 其中@叫做语法糖 定义装饰器 第一层函数传入参数(用于传入原函 ...

  9. POJ 1789 Truck History &lpar;Kruskal 最小生成树&rpar;

    题目链接:http://poj.org/problem?id=1789 Advanced Cargo Movement, Ltd. uses trucks of different types. So ...

  10. Cloud Container Service experimentation

    Cloud Container Service experimentation K8S技术社区 举办云容器技术动手工作坊 活动时间:2018年1月13日(周六)13:30-17:30 活动地点:北京海 ...

相关文章