防止以

时间:2017-04-07 11:18:00

标签: javascript jquery ajax

假设我有一个名为urlslist的表单中的textarea,用户将在其中输入一个url列表,每行一个。我通过带有查询的ajax处理提交,如下所示。

$(function () {
    $("#urlslist").submit(function(e) {

        //prevent Default functionality
        e.preventDefault();

        //get the action-url of the form
        var actionurl = e.currentTarget.action;

        //do your own request an handle the results
        $.ajax({
            url: actionurl,
            type: 'post',
            dataType: 'json',
            data: $("#urlslist").serialize(),
            success: function(data) {
                //put the result in another textarea here
            }
        });

    });

});

然后我在另一个textarea中显示我的处理结果(即每个输入的另一个url)。它运作良好,但我想改进它,以便旧网址不会通过ajax提交到服务器,而不清除任何textareas。

修改1

我想我需要用一个例子证明这一点。

假设urlslist textarea包含一个url.I点击提交,我得到一个结果。现在我在urlslist添加另一个网址,然后再次点击提交。现在将有2个网址在帖子请求中。如何确保只发送新网址。

4 个答案:

答案 0 :(得分:1)

使用Mozilla的Do something only once lib

function executeOnce() {
  var argc = arguments.length,
    bImplGlob = typeof arguments[argc - 1] === "string";
  if (bImplGlob) {
    argc++;
  }
  if (argc < 3) {
    throw new TypeError("executeOnce - not enough arguments");
  }
  var fExec = arguments[0],
    sKey = arguments[argc - 2];
  if (typeof fExec !== "function") {
    throw new TypeError("executeOnce - first argument must be a function");
  }
  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
    throw new TypeError("executeOnce - invalid identifier");
  }
  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") {
    return false;
  }
  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
  return true;
}

您可以进行以下操作:

     // some custom helper
String.prototype.s2b64 = function() { // make base64 from string
  return window.btoa(unescape(encodeURIComponent(this)));
}
String.prototype.replaceArray = function(find, replace) { // replace by array
  var replaceString = this;
  for (var i = 0; i < find.length; i++) {
    replaceString = replaceString.replace(find[i], replace[i]);
  }
  return replaceString;
};
     // here we start :
  var output = [];
  $.each($("#urlslist textarea").first().val().split(/\n/), function(index, value) {
    alert(index + ": " + value);
    if (value != '')
      executeOnce(function(v) {
        output.push(value);
      }, null, value, 'urldone_' + value.s2b64().replaceArray(
        ["expires", "path", "domain", "secure"], 
        ["e_xpires", "p_ath", "d_omain", "s_ecure"]) + '');
  });

  alert(output);

有些部分可能看起来有点奇怪,但它都是关于防弹手册setCookie(就像使用b64和搜索&amp;替换以防我们真的不走运并随机获取一个cookie关键字来自b64输出)

如果您想删除所有已保存的值,请输入以下代码:

  var cookieNames = document.cookie.split(/=[^;]*(?:;\s*|$)/);

  // Remove any that match the pattern
  for (var i = 0; i < cookieNames.length; i++) {
    if (/^urldone_/.test(cookieNames[i])) {
      document.cookie = cookieNames[i] + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
    }
  }

JSfiddle

这是一个基于Cookie的答案(通过浏览器,刷新和重启证明)。

答案 1 :(得分:0)

以下是此链接http://jsfiddle.net/userdude/2hgnZ/

开发的工作示例
{{1}}

答案 2 :(得分:0)

    var map = []
        map['www.google.com'] = 'www.google.com';
        var urls = ['www.google.com', 'www.yahoo.com']; //this is form text area
        for (var i = 0; i< urls.length; i++) {
            if (map[urls[i]] !== urls[i]) {
            console.log('post ' +);
            map[urls[i]] = urls[i];
          } else {
            console.log('don not post ' + urls[i]);
          }
        }

阅读上面的控制台代码,你可能会有所了解 我保持这里
步骤1)var map = [] global
第2步)地图[&#39; www.google.com&#39;] =&#39; www.google.com&#39 ;;这条线已经发布了
步骤3)循环通过var urls这是你的文本区域
步骤4)如果(map [urls [i]]!== urls [i])检查已发布的当前链接,如果没有发布,则不发布

答案 3 :(得分:0)

我的建议是使用.one()方法。

  

.one()方法与.on()完​​全相同,只是给定元素和事件类型的处理程序在第一次调用后未绑定http://api.jquery.com/one/

$("form").one('submit',function(e) {

    //prevent Default functionality
    e.preventDefault();

    //save current element to var for speed
    var self = $(this);

    //do your own request an handle the results
    $.ajax({
        url: self.attr('action'),
        type: self.attr('method'),
        dataType: 'json',
        data: $("#urlslist").serialize(),
        success: function(data) {
            //put the result in another textarea here
        }
    });

});

修改

对于复制,您需要使用服务器端(操作)脚本来控制它,以检查数据库以确保每个新URL都是唯一的。你用什么语言后端?

<强> PHP

$con = //database connection
if(isset($_POST['urlslist'] && $_POST['urlslist'] != '') {
    $urls = explode("\n",$_POST['urlslist']);
    foreach($urls as $url) {
        if($exists = mysqli_query($con,"SELECT * FROM urls_table WHERE url = '$url'")) {
            // run update or ignore
        } else {
            // insert into db
        }
    }
}