0、概述

本demo实现以下功能：

①在html页面输入姓名和邮箱，点击提交（这里为get）

②服务器通过解析表单内容，返回对“姓名”和“邮箱”的一个欢迎页面

1、软件准备

①xampp

作用：提供apache服务

②webStorm

作用：编辑html、php代码

2、服务器准备

进入xampp的hotdocs目录，如图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

Welcome <?php echo $_GET["name"]; ?><br>

Your email address is: <?php echo $_GET["email"]; ?>

</body>

</html>

3、web前端准备

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.min.css">

     <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>

     <script type="text/javascript" src="jqm/jquery.mobile-1.4.5.min.js"></script>

     <script type="text/javascript" src="js/app.js"></script>

 </head>

 <body>

 <div data-role="page">

     <div data-role="header">

         <h1>header in page</h1>

     </div>

     <div class="ui-content">

         <form action="http://172.163.0.195:8888/index.php" method="get">

             Name: <input type="text" name="name"><br>

             E-mail: <input type="text" name="email"><br>

             <input type="submit" value="提交">

         </form>

     </div>

     <div data-role="footer" data-position="fixed">

         <h1>footer</h1>

     </div>

 </div>

 </body>

注意上述代码的17行中的"http://172.163.0.195:8888"要替换成你自身的ip地址和端口号（端口号是在xampp中设置的）

4、运行

①运行xampp的apache服务，这里注意端口号要和代码中的保持一致

②运行webstorm代码

③在浏览器中填写name和email，提交，然后看php返回结果是否一致，（demo完毕）

自己搭建php服务器（可接受表单提交，并返回页面）的更多相关文章

  1. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  2. phpcms v9自定义表单提交后返回上一页实现方法

    PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...

  3. form + iframe 获取表单提交后返回的数据

    原理: submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了: 原文地址: http://blog.csdn.net/simeng_1016/articl ...

  4. springboot打war包部署tomcat服务器，以及表单提交数据乱码处理

    小白觉得springboot打成jar包直接使用内嵌的tomcat或jetty容器(java -jar xxx.jar)运行项目不利于定位问题,我还是习惯于查看tomcat或nginx的日志来定位问题 ...

  5. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  6. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  7. 处理form表单提交后返回值的处理办法【html5】

    同事朋友ajax,最近在弄公司业务电话机,自主搭建,买的设备. 其中最主要功能是前端发起呼叫,通过浏览器触发设备进行呼叫功能,走后台呼叫还不行. 需求是这样的: 前端给设备ip发送特定的一段xml信息 ...

  8. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

  9. vux 表单提交数据 返回后页面跳转

    ps:仅作参考

随机推荐

  1. AD的命名规则 AD常用产品型号命名规则

    AD的命名规则 AD常用产品型号命名规则 DSP信号处理器    放大器工业用器件通信    电源管理    移动通信 视频/图像处理器等 模拟A/D    D/A 转换器 传感器    模拟器件 A ...

  2. IOS 多线程-NSThread 和线程状态

    @interface HMViewController () - (IBAction)btnClick; @end @implementation HMViewController - (void)v ...

  3. bootstrap suggest搜索建议插件

    近日因工作需要看了下此插件. 首先下载bootstrap js包.添加此插件的引用.注意css样式要引用,不能忘记. 前台页面代码,因为楼主做的是选项卡切换查询不同的结果. <tr> &l ...

  4. 堆优化dijkstra

    单源最短路径 题目链接:https://www.luogu.org/problemnew/show/P4779 直到做了这个题才发现我之前写的堆优化dijkstra一直是错的.. 这个堆优化其实很容易 ...

  5. WebStrome react-native代码智能提示

    1.clone到本地 git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate  2,添加ReactNative. ...

  6. 基于Vue的SPA如何优化页面加载速度

    常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使 ...

  7. 【经典问题】bzoj2957: 楼房重建

    经典问题:动态维护上升子序列长度 进阶问题:[经典问题]#176. 栈 Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无 ...

  8. cx_freeze的安装使用

    python是一个非常非常优秀的编程语言,它最大的特性就是跨平台.python程序几乎可以在所有常见的平台中进行使用,而且大部分无需修改任何代码!不过,python也有一点点小缺憾(这个是由于自身本质 ...

  9. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  10. Linux CentOS 7的图形界面安装

    1.首先安装X(X Window System) yum groupinstall "X Window System" 2.由于这个软件组比较大,安装过程会比较慢,安装完成后会出现 ...