使用FormData无刷新表单信息提交

用新技术FormData表单数据对象, 可以实现快速收集表单信息。

FormData是html5的新技术, 在主流浏览器(IE10以上版本支持)都可以正常使用。

<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.onload = function(){
    var fm = document.getElementsByTagName('form')[0];
    fm.onsubmit = function(evt){
    //ajax+dom无刷新获得表单信息并传递给服务器
    //① 获得表单信息
    //利用javascript提供的新技术快速、简单地收集全部的表单域信息
    //FormData() 表单数据对象可以帮我们完成此需求
    var fd = new FormData(fm);//收集fm元素节点内部的表单域信息
    //也可写成var fd = new FormData(this);
    //fd里边有我们收集到的全部的表单域信息
    //② ajax传递表单信息
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
        }
    }
    xhr.open('post','./04.php');
    //xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(fd);
    //event.returnValue=false; //IE6 7 8
    evt.preventDefault();//浏览器进制跳转 主流浏览器
    }
}
</script>
</head>
<body>
<h2>无刷新form表单提交(FormData)</h2>
<form method="post" >
<p>用户名：<input type="text" name="username" id="mingzi"></p>
<p>密码：<input type="password" name="userpwd" id="mima"></p>
<p>邮箱：<input type="text" name="useremail" id="youxiang"></p>
<p><input type="submit" value="注册"></p>
</form>
</body>
</html>

<?php
//获得传递过来的post格式信息
print_r($_POST);
?>

注意：FormData使用

1 ajax不要设置header头

2 form表单域必须有name属性

3 IE10以上版本支持FormData, IE9不支持

.什么是PHP采集文章无刷新？

PHP采集文章无刷新是指利用PHP编程语言实现的一种技术，可以在网页上自动获取其他网站上的文章内容，并将其显示在当前页面上，且无需刷新页面。这种技术可以大大提高用户体验，使用户能够更方便地浏览相关内容。

2. PHP采集文章无刷新有哪些应用场景？

PHP采集文章无刷新技术可以应用于各种场景，例如新闻聚合网站、博客网站等。通过采集其他网站上的文章内容，可以实现自动更新和展示最新的资讯内容，为用户提供更好的阅读体验。

3. PHP采集文章无刷新的实现原理是什么？

PHP采集文章无刷新的实现原理主要包括两个步骤：首先是通过PHP的curl函数库或file_get_contents函数获取目标网页的HTML源代码；然后使用正则表达式或DOM解析器等方式提取所需的文章内容，并将其插入到当前页面中指定的位置。

4. PHP采集文章无刷新需要注意哪些问题？

在使用PHP采集文章无刷新时，需要注意以下几点：首先，要确保所采集的网站允许被其他网站采集其内容，遵守相关法律法规；其次，要注意采集频率，不要对目标网站造成过大的访问压力；此外，还要处理好字符编码、链接跳转等问题，以确保采集结果的准确性和完整性。

5. PHP采集文章无刷新的优势是什么？

PHP采集文章无刷新具有以下几个优势：首先，可以实现自动化采集和展示最新内容，节省人工操作时间；其次，可以提高用户体验，使用户能够更方便地获取相关信息；此外，可以增加网站的内容丰富度和吸引力，提高网站的流量和用户粘性。

6. PHP采集文章无刷新的缺点是什么？

PHP采集文章无刷新也存在一些缺点：首先，由于依赖于目标网站的HTML结构和内容格式，当目标网站发生改变时，可能需要相应地修改采集代码；其次，由于需要从其他网站获取内容，在网络环境不稳定或目标网站响应速度较慢时，可能会影响到页面加载速度和用户体验。

7.如何使用PHP采集文章无刷新？

使用PHP采集文章无刷新可以按照以下步骤进行：首先，确定要采集的目标网站和所需的文章内容；然后，使用PHP的curl函数库或file_get_contents函数获取目标网页的HTML源代码；接着，使用正则表达式或DOM解析器等方式提取所需的文章内容，并将其插入到当前页面中指定的位置。

8. PHP采集文章无刷新需要哪些技术储备？

使用PHP采集文章无刷新需要具备以下技术储备：首先，熟悉PHP编程语言的基本语法和函数库；其次，了解HTML和CSS的基本知识，以便进行页面内容展示和样式调整；此外，掌握正则表达式或DOM解析器等方式提取所需内容的方法。

9. PHP采集文章无刷新有哪些常用工具或框架？

在使用PHP采集文章无刷新时，可以借助一些常用工具或框架来简化开发流程，例如Goutte、QueryList、Simple HTML DOM等。这些工具或框架提供了丰富的API和功能，可以方便地实现对目标网页的采集和内容提取。

篇，你可以学到Ember页面的创建，并且在不同的页面之间跳转。新建两个页面，一个是创建about页面，一个是创建contact页面。

看完本篇你将学到如下知识点：

定义路由
使用路由模板
自定义路由URL
使用<LinkTo>组件在不同模板之间跳转
组件之间传递参数、属性

定义路由

在前一篇，我们定义了一个index.hbs首页，接着继续在templates下面创建新的页面。

首先通过Ember CLI创建一个路由，

ember g route about

本机创建日志：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ✗  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 › ember g route about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing route-test

  create tests/unit/routes/about-test.js

题外话：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ✗ 9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ›

这一段是我本机命令行自动前缀，如果你的命令行安装过zsh这个工具，就会很熟悉，zsh是一个非常强大而且漂亮的命令行工具。

打开router.js，可以看到自动创建了一个路由this.route('about');

使用路由模板

修改about路由模板文件app/templates/about.hbs，在文件内添加一下HTML内容。

{{!-- app/templates/about.hbs --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

浏览器访问验证：http://localhost:4200/about。可以看到about页面的内容

使用同样的方式创建contact路由。

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ✗  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:37 › ember g route contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML内容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

浏览器访问验证：http://localhost:4200/contact。可以看到contact页面的内容

contact1.png

自定义路由URL

前面已经定义了两个页面，一个是about一个是contact。默认情况下访问的路径都是和路由同名的，另外Ember提供了非常灵活的扩展，你可以自定义的路由的访问路径，比如下面的代码，把contact路由的访问路径改为getting-in-touch，手动修改router.js文件。

Router.map(function() {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

注意看第三行，使用path属性指定这个路由的访问路径为getting-in-touch。

现在你在访问http://localhost:4200/contact就会发现报错了，提示找不到这个路由了。

contact2.png

再访问http://localhost:4200/getting-in-touch。可以看到页面的内容就是之前contact的内容。

contact3.png

使用<LinkTo>组件在不同模板之间跳转

<LinkTo>是Ember提供好的组件，用于在不同模板之间跳转，其作用类似于HTML标签中的<a>标签。

为何不直接用<a>标签而是要自定义一个跳转的组件呢？？因为使用普通的<a>标签，当你点击链接的时候会发送浏览器的刷新，但是Ember是单页应用不需要刷新整个页面，只要是实现页面的跳转即可（所谓的跳转其实就是实现不同的路由之间的切换，并且不会刷新页面）。

继续改造前面的创建的index,about和contact。分别在这两个模板页面中添加一个跳转的链接。

{{!-- index.hbs是 "/" 这个路径默认的页面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo组件添加一个跳转按钮，并且指定调整到的路由是about，也就是说当用户点击这按钮的时候会跳转到about这个子页面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

index5.png

点击“About Us”这个按钮，然后看浏览器的地址栏，可以看到自动转到about这个路由下，并且页面不会刷新。为了验证前面所说的效果，我在About Us后面添加了一个<a>标签按钮，当你点击这个链接的时候会看到浏览器自动刷新了，并且也跳转到about页面上。

index6.png

继续改造about和contact，分别添加跳转按钮。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact两个页面添加了两个跳转按钮，一个是about和contact页面的相互跳转，一个是跳转回首页的按钮。

about3.png

contact4.png

通过前面的这三个页面，相信你很容易就可以掌握<LinkTo>组件的使用。其中@route属性指定的是你定义的路由名字，这个路由的名字要和router.js里面的定义的完全一致，否则会找不到。另外需要注意的是@route属性的值一定是路由的名字而不是URL的名字，比如contact路由，这个路由的路由名是contact而不是访问的getting-in-touch。

另外在<LinkTo>组件上可以使用普通的HTML属性，比如上面使用的class属性，这个class属性就是普通HTML属性，用于指定CSS样式的。在Ember应用中，通过@符号区别是普通的HTML属性还是Ember提供的属性，比如上面使用的@route就是Ember提供的属性。

在底层，<LinkTo>组件会为我们生成一个常规的<a>标签，并带有针对特定路由的href。通过Ember生成的这个<a>标签对于用户来说非常友好，无需页面刷新就可以实现跳转。简单讲，当单击这些特殊链接之一时，Ember将拦截该单击，呈现新页面的内容，并更新URL（所有这些操作均在本地执行，而无需等待服务器），从而避免刷新整个页面。

在线咨询

上一篇：css实现发光的input输入框
下一篇：前端入门-html 表单控件使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。