Как я могу сделать вызов AJAX для простого события нажатия кнопки JQuery

Question

Я делаю это, продолжая обновлять sh страницу для каждого нового запроса,

$(document).ready(function (event) {
    $('#wordsubmit').on('click', function () {
        var wordSearchValue = $("#mainword_search").val();
        if (/\s/.test(wordSearchValue)) {
            wordSearchValue = wordSearchValue.replace(/ /g, '-');
        }
        else {
            sessionStorage.setItem("data", wordSearchValue);
            var pathParameter = 'word-' + wordSearchValue;
            window.location.href = "/search/" + pathParameter + '-examples';
        }
    });
});

В моем приложении flask у меня есть метод представления как:

@app.route('/search/<word>-examples', methods=['GET', 'POST'])
def word_details(word):
    query=word_search_query(word)
    data=db['wordsdata'].aggregate(query) // get a cursor
    return render_template('worddetails.html',data=data)

Могу ли я узнать, как я могу сделать AJAX вызов на тот же, для которого я прочитал, загружает содержимое без фактической перезагрузки страницы,

Я пробовал как:

$(document).ready(function (event) {
    $("#wordsubmit").on('click', function () {
        var wordSearchValue = $("#mainword_search").val();
        if (/\s/.test(wordSearchValue)) {
            wordSearchValue = wordSearchValue.replace(/ /g, '-');
        }
        if (wordSearchValue == '') {
            //pass
        }
        var pathParameter = 'word-' + wordSearchValue;
        $.ajax({
            url: "/search/" + pathParameter + '-examples', success: function (result) {

               //what to do here ??
            }
        });
    });
}); 

Я точно ищу, как сделать AJAX звонок на вышеуказанный звонок, который я использовал просто JQuery

Любая помощь или руководящие ссылки очень ценятся, TIA

Answer 1

Обратитесь к ajax вызову. и получить в div. какие данные вы хотите. ajax вызов с URL и получение данных.

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "https://jsonplaceholder.typicode.com/posts", success: function(result){
    console.log(result[0]['title']);
      $("#div1").html(result[0]['title']);
    }});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>