js和php互相传值

56 篇文章 0 订阅
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(推荐)。
有了以上这些,不管是HTML页面里的值还是JS中变量的值,都可以轻松的传入PHP,当然,PHP的值也可传到想要的地方。
在父组件中,可以通过props将数据传递给子组件。而子组件想要将数据传递回父组件,则可以通过自定义事件(event)或者回调函数的方式进行。 使用props传递数据给子组件的示例代码如下: ```javascript // 父组件 <template> <div> <ChildComponent :dataProp="parentData" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentData: 'Hello from parent!', }; }, components: { ChildComponent, }, }; </script> // 子组件 <template> <div> <p>{{ dataProp }}</p> </div> </template> <script> export default { props: ['dataProp'], }; </script> ``` 在上述示例中,父组件通过props向子组件传递了一个名为"dataProp"的属性,子组件则通过`props: ['dataProp']`接收并使用该属性。 如果子组件需要将数据传递回父组件,可以使用自定义事件或回调函数的方式。 使用自定义事件传递数据的示例代码如下: ```javascript // 子组件 <template> <div> <button @click="sendDataToParent">Send Data to Parent</button> </div> </template> <script> export default { methods: { sendDataToParent() { this.$emit('customEvent', 'Data from child!'); }, }, }; </script> // 父组件 <template> <div> <ChildComponent @customEvent="handleCustomEvent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { methods: { handleCustomEvent(data) { console.log(data); }, }, components: { ChildComponent, }, }; </script> ``` 在上述示例中,子组件通过`this.$emit('customEvent', data)`触发自定义事件"customEvent"并传递数据给父组件。父组件通过`@customEvent="handleCustomEvent"`监听该事件,并在`handleCustomEvent`方法中接收子组件传递的数据。 使用回调函数传递数据的示例代码如下: ```javascript // 子组件 <template> <div> <button @click="sendDataToParent">Send Data to Parent</button> </div> </template> <script> export default { methods: { sendDataToParent() { this.$emit('customEvent', 'Data from child!'); }, }, }; </script> // 父组件 <template> <div> <ChildComponent :callback="handleCallback" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { methods: { handleCallback(data) { console.log(data); }, }, components: { ChildComponent, }, }; </script> ``` 在上述示例中,父组件通过props将一个名为"callback"的回调函数传递给子组件。子组件可以通过调用该回调函数并传递数据来将数据传递回父组件。父组件在回调函数中接收并处理子组件传递的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值