如何将jQuery中的<textarea>值永久地添加到html文件中?

时间:2015-07-02 02:37:26

标签: javascript jquery html append textarea

&lt; p&gt;简单地说,我的网站上有一个功能,允许用户输入文字并将其显示在页面上。&lt; / p&gt; &lt; p&gt;但是,当重新加载页面时,该文本不会永久保留并消失。&lt; / p&gt; &lt; p&gt;如何让jQuery添加插入textarea中的文本,以便在提交后保留在该页面上?&lt; / p&gt; &lt; p&gt;这就是我的jQuery的样子。&lt; / p&gt; &LT;预&GT;&LT;代码&GT; //当&#39;按钮&#39;单击,它会在单独的div中打印textarea中的任何内容 //就是这个: $(document).ready(function(){ $(&#39;#button&#39;)。click(function(){     var toAdd = $(&#39; textarea [name = input]&#39;)。val();     $(&#39; .list&#39;)。追加(&#39;&lt; div class =&#34;帖子&#34;&gt;&#39; + toAdd +&#39;&lt; / div&gt; &#39); }); }); &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;请问我是否了解我,并提前感谢您的任何帮助:)&lt; / p&gt;

3 个答案:

答案 0 :(得分:1)

您需要将信息发送到您的服务器,您的服务器必须修改服务器文件系统上的实际文件。当您加载网页时,浏览器会向您的服务器发出请求并要求提供该文件。每次重新加载时,它都会再次询问,服务器会提供该文件的新副本。必须在服务器上的源处修改该文件。

从你的问题来看,说你有很多学习要做可能是安全的,但也许这个例子可以让你开始。

首先,您需要客户端的代码将数据发送到您的服务器:

$(function () {
  $('#button').click(function () {
    var toAdd = $('textarea[name=input]').val();
    $.ajax({
      url: '/some/endpoint/on/your/server',
      method: 'POST',
      data: { htmlToAppend: toAdd },
    });
  });
});

使用JQuery为您的服务器生成POST request,并将toAdd元素与请求一起发送。

接下来,您的服务器需要编码以接受该POST请求并修改HTML文件的来源。以下代码是Node.js平台上运行的所有JavaScript。 Node.js只是谷歌Chrome的JavaScript引擎(名为V8),在服务器而不是浏览器中运行。浏览器中的JavaScript可以访问客户端API,该API允许它控制当时加载到浏览器中的HTML,这是您通过将<div>附加到页面而执行的操作。节点中的JavaScript可以访问服务器端API,以便它在您的服务器上执行操作。

如果您不知道node.js不用担心,这只是一个示例,用于演示您在服务器端需要什么。任何服务器端语言/技术都可以在这里工作,它只需要执行与此类似的操作:

// Think of these require calls like <script src=""></script>
// references in node. The "http", "fs", and "querystring"
// modules are both modules built into node.js.
var http = require('http');
var fs = require('fs'); // fs stands for File System.
var qs = require('querystring');

// You can get tons of modules from the community
// using the npm registry. Cheerio is one of them.
// I did "npm install cheerio" from the root of my project.
// Cheerio is basically JQuery that you can use on the
// server to manipulate an HTML file.
var cheerio = require('cheerio');

// Create an http server to listen for requests.
http.createServer(function (request, response) {
  // If the request was made to the root of our site, serve our
  // html file.
  if (request.url === '/') {
    // Read html file from hard drive.
    var htmlFile = fs.readFileSync('./path/to/html/file.html');
    // Respond to the user with a 200 status code telling the
    // browser that the request was successful.
    response.writeHead(200);
    // Write the html file's contents to the response stream.
    response.write(htmlFile, 'binary');
    // Close the response stream.
    response.end();
  }
  else if (request.url.toLowerCase() === '/some/endpoint/on/your/server') {
    // Declare a variable to build our request body.
    var requestBody = '';
    // Whenever the request stream receives data, append
    // it to requestBody.
    request.on('data', function (data) {
      requestBody += data;
    });
    // When the request is finally complete, run our code to
    // modify the actual HTML file.
    request.on('end', function () {
      // Use the querystring module to parse the requestBody
      // into a JavaScript object similar to the one we passed
      // to JQuery's ajax method on the client-side.
      var post = qs.parse(requestBody);
      // Read the contents of our HTML file into memory.
      var htmlFile = fs.readFileSync('./path/to/html/file.html');
      // Load the html file into Cheerio so we can manipulate it
      // jquery style :)
      var $ = cheerio.load(htmlFile);
      // Append the htmlToAppend from the request body to the
      // bottom of the .list element.
      $('.list').append(post.htmlToAppend);
      // Render the HTML document out of Cheerio and into a string.
      var newHtmlFile = $.html();
      // Write the modified document back to the hard drive.
      fs.writeFileSync('./path/to/html/file.html', newHtmlFile);
      // End the response so the user's browser doesn't hang waiting
      // waiting for a response from the server. Ideally you'd send
      // down some data that your client-side jquery can use to
      // display a friendly message to the user.
      response.end();
    })
  }
});

答案 1 :(得分:0)

确实没有太多信息可以继续,但你也可以使用localstorage,在页面加载后读取值,并设置文本/值。

http://www.webdesignerdepot.com/2013/04/how-to-use-local-storage-for-javascript/

但就个人而言,除非有特殊要求,否则我会选择Chev的想法。

答案 2 :(得分:0)

如果你想使用HTML5本地存储,那就足够了,而不是简单。

window.localStorage.setItem("name", value);
window.localStorage.getItem("name");

参见JsFiddle示例here