javascript - 可以使用一个函数对 2 个链接进行 ajax 调用

当我点击fetch时，我需要获取数据但不显示在表单中，但是当我幸运地点击时，我想显示列表并填写表格。

我的获取链接的逻辑运作良好，我是否必须重复同样的逻辑才能获得幸运链接？有没有优化的方法来做到这一点。
$post-item-# click 事件在每个循环的成功调用数据中，这是正确的地方吗？

这是下面片段的镜像:JSFiddle

数据

{
    tag: "urlfoodchannel,chocolate,dessert",
    searchedTags: "urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert",
    tagPage: "/food/urlfoodchannel,chocolate,dessert-recipes/",
    page: "2",
    pages: "2",
    total: "20",
    posts: [{
        postId: "21122896",
        postUrl: "/article/2014/12/30/chocolate-oreo-ice-cream/21122896/",
        postTitle: "Chocolate Oreo Ice Cream",
        postExcerpt: "This creamy chocolate ice cream with chunks of Oreo cookie is perfect and surprisingly easy to make!",
        postAuthor: "Marin Mama Cooks",
        postPubdate: "2014-12-30T20:49:00",
        postPubdateUnix: "1419990540",
        postImage: "http://urlcdn.com/hss/storage/midas/201316424/chocolate-oreo-ice-cream-11.jpg"
    } {
        postId: "21122797",
        postUrl: "/article/2014/12/30/sheet-pan-smores/21122797/",
        postTitle: "Sheet Pan S'mores",
        postExcerpt: "You've never had s'mores quite like this! Try this decadent and delicious recipe for sheet pan s'mores.",
        postAuthor: "Oh, Bite It",
        postPubdate: "2014-12-30T15:26:00",
        postPubdateUnix: "1419971160",
        postImage: "http://urlcdn.com/hss/storage/midas/201315673/spsbet.jpg"
    }]
}

脚本

$(document).ready(function () {
    $("#fetch").on("click", function () {
        tags = $("#tags").val();
        count = $("#count").val() ? $("#count").val() : "10";
        page = $("#page").val() ? $("#page").val() : "1";
        apiurl = "http://urlblog.url.com/api/tags-v1/" + tags + "?pageSize=" + count + "&page=" + page;
        $.ajax({
            type: 'GET',
            url: apiurl,
            data: {
                get_param: 'value'
            },
            success: function (data) {
                $("#tag").text(data.tagPage);
                $.each(data.posts, function (i) {
                    $("#posts").append('<li  class="post-item-' + i + '"><p class="post-title">' + data.posts[i].postTitle + ' <a href="#" class="addpost"><img class="add-row" src="/portalcms/_tool/media/add.png">+</a></p><p class="post-thumb"><img src="' + data.posts[i].postImage + '" width="150px" class="post-image"/></p><p class="post-url">' + data.posts[i].postUrl + '</p></li>');
                    $(".post-item-" + i).bind("click", function () {
                        k = i + 1;
                        tval = $(this).find(".post-title").text();
                        ival = $(this).find(".post-image").attr("src");
                        uval = $(this).find(".post-url").text();
                        $("#input-link" + k + "\\.alt").val(tval);
                        $("#input-link" + k + "\\.href").val(uval);
                        $("#input-link" + k + "\\.credit").val(ival);
                    });
                });

            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="visible">Tags for tomorrow:
    <input type="text" name="futuretags" id="future-tags" />
</fieldset>
<fieldset class="visible">Tags:
    <input type="text" name="tags" id="tags" value="" />Count:
    <input type="text" name="count" id="count" value="10" />Page:
    <input type="text" name="page" id="page" value="1" /> <a href="#" id="fetch">Fetch</a>
 <a href="#" id="luckyfetch">Feeling Lucky</a>

    <ul id="posts"></ul>
</fieldset>
<fieldset>
    <legend>Link 1:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link1.src._action">Image:</label>
            <br />
            <select id="input-link1.src._action" name="link1.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link1.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link1.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link1.alt">Alt Text:</label>
            <input id="input-link1.alt" type="text" name="link1.alt" value="" />
        </li>
        <li class="">
            <label for="input-link1.credit">Credit:</label>
            <input id="input-link1.credit" type="text" name="link1.credit" value="" />
        </li>
        <li class="">
            <label for="input-link1.href">Href (URL):</label>
            <input id="input-link1.href" type="text" name="link1.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link1.target">Target:</label>
                    <select id="input-link1.target" name="link1.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link1.onclick">Onclick:</label>
                    <input id="input-link1.onclick" type="text" name="link1.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link1.otherAtts">Other Attributes:</label>
                    <input id="input-link1.otherAtts" type="text" name="link1.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link1.trackKey">Tracking Key:</label>
                    <select id="input-link1.trackKey" name="link1.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link1.trackVal">Tracking Value:</label>
                    <input id="input-link1.trackVal" type="text" name="link1.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset>
<fieldset>
    <legend>Link 2:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link2.src._action">Image:</label>
            <br />
            <select id="input-link2.src._action" name="link2.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link2.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link2.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link2.alt">Alt Text:</label>
            <input id="input-link2.alt" type="text" name="link2.alt" value="" />
        </li>
        <li class="">
            <label for="input-link2.credit">Credit:</label>
            <input id="input-link2.credit" type="text" name="link2.credit" value="" />
        </li>
        <li class="">
            <label for="input-link2.href">Href (URL):</label>
            <input id="input-link2.href" type="text" name="link2.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link2.target">Target:</label>
                    <select id="input-link2.target" name="link2.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link2.onclick">Onclick:</label>
                    <input id="input-link2.onclick" type="text" name="link2.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link2.otherAtts">Other Attributes:</label>
                    <input id="input-link2.otherAtts" type="text" name="link2.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link2.trackKey">Tracking Key:</label>
                    <select id="input-link2.trackKey" name="link2.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link2.trackVal">Tracking Value:</label>
                    <input id="input-link2.trackVal" type="text" name="link2.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset>
<fieldset>
    <legend>Link 3:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link3.src._action">Image:</label>
            <br />
            <select id="input-link3.src._action" name="link3.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link3.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link3.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link3.alt">Alt Text:</label>
            <input id="input-link3.alt" type="text" name="link3.alt" value="" />
        </li>
        <li class="">
            <label for="input-link3.credit">Credit:</label>
            <input id="input-link3.credit" type="text" name="link3.credit" value="" />
        </li>
        <li class="">
            <label for="input-link3.href">Href (URL):</label>
            <input id="input-link3.href" type="text" name="link3.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link3.target">Target:</label>
                    <select id="input-link3.target" name="link3.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link3.onclick">Onclick:</label>
                    <input id="input-link3.onclick" type="text" name="link3.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link3.otherAtts">Other Attributes:</label>
                    <input id="input-link3.otherAtts" type="text" name="link3.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link3.trackKey">Tracking Key:</label>
                    <select id="input-link3.trackKey" name="link3.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link3.trackVal">Tracking Value:</label>
                    <input id="input-link3.trackVal" type="text" name="link3.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset> <span id="tag"></span>

最佳答案

您可以做的就是像这样编写 javascript 函数:

$(function(){
    var searchmethods = {
        fetched : false,
        data : "",
        fetch : function(callback) {
            $.ajax({
                success: function(data) {
                    fetched = false;
                    searchmethods.data = data;
                    if($.isFunction(showResults)) showResults();
                }
            });
        },
        lucky : function() {
            if(searchmethods.fetched) {
                searchmethods.showResults();
            } else {
                searchmethods.fetch(searchmethods.showResults);
            }
        },
        showResults : function() {
            // show results
        }
    };

    $(".link").click(function(){
        var action = $(this).data("action");
        searchmethods[action].apply(this);
    });
});

我喜欢这种方式，因为您将需要的所有代码都放入一个对象中称为 searchmethods 并且它具有方法。这是它是如何工作的:

searchmethods.fetch() 在您点击获取链接时调用，并检索使用 jQuery $.ajax() 方法的数据。

searchmethods.lucky() 当您点击幸运链接时调用，检查数据是否已被检索到，如果没有则调用 searchmethods.fetch() 方法，并通过参数传递函数 searchmethods.lucky() 以便在 之后调用它$.ajax() 获取数据

HTML 是这样的:

<a data-action="fetch" class="link">fetch</a>
<a data-action="lucky" class="link">lucky</a>

但这取决于你，这只是一个简单的方法

编辑:回答它已经更新了，抱歉我的英语很奇怪

关于javascript - 可以使用一个函数对 2 个链接进行 ajax 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27831772/

javascript - 可以使用一个函数对 2 个链接进行 ajax 调用

数据

脚本

上一篇：javascript - 如果单击具有相似类的元素，则获取元素属性

下一篇：javascript - 使用 Webstorm 9.0 进行实时编辑