Почему мой jquery ajax не работает на моей странице, а страница также обновляется

Question

Я новичок в области jQuery/Ajax, и моя небольшая тестовая функция не работает. И моя страница также refreshingcan любой один помочь мне

<script type="text/javascript" > 
 
$(document).ready(function() { 
 
    $("#ser_itm").change(function() { 
 
     var id=$(this).val(); 
 
     var dataString = 'id='+ id; 
 
     alert(dataString); 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: "bar_pull.php", 
 
      data: dataString, 
 
      cache: false, 
 
      success: function(html) { 
 
       $("#tbl").html(html); 
 
      } 
 
     }); 
 
    }); 
 
});

Answer 1

Так что я собираюсь попытаться объяснить эти пункты более четко:

---

Вы не можете получить доступ к C:\Users\yah\Desktop\text.txt. Это server side path, ваш javascript работает на client side. Таким образом, это должен быть путь, который вы можете найти в своем браузере, что-то вроде /pathinURL/text.txt. Как это сделать, зависит от вашего хостинга технологии и т.д.

---

Ваши спины вызова также неправильно,

$('.linkDetails').on('click', getDetailsFromServer()); 

&

success: postToPage() 

они будут выполнять функцию, когда они hit (ну, на самом деле, он привязывает результат функции), а не когда событие происходит. Для того, чтобы эти работы вам необходимо удалить фигурные скобки:

$('.linkDetails').on('click', getDetailsFromServer); 

&

success: postToPage 

это то подключает фактические функции в качестве указателей на функции и, таким образом, фактические функции будут уволены, если вы хотите, чтобы они были ,

так что ваш окончательный код будет выглядеть следующим образом:

$('.linkDetails').on('click', getDetailsFromServer); 

function getDetailsFromServer() { 

    $.ajax({ 
     type: 'GET', 
     url: '/someURL/text.txt', 
     success: postToPage 
    }); 
} 

function postToPage(data) { 

    $('.textDetails').text(data); 
    console.log(data); 
} 

Answer 2

same origin policy реализованы браузерами предотвращает локальной файловой системы URLs ... если страница и файлы находятся в тех же папках он может работать.

См SOP for file URI для FF

Answer 3

, что Arun P Johny сказал правильно! но ваш код имеет еще один probloem

$('.linkDetails').on('click', getDetailsFromServer); 

попробовать выше

Answer 4

Передайте функцию, а не результат вызова функции:

$('.linkDetails').on('click', getDetailsFromServer); 

Применить же к вашему AJAX успеха обратного вызова:

success: postToPage 

Также необходимо определить функцию getDetailsFromServer(), прежде чем связывать ее с мероприятие. Переместите объявление функции перед вызовом .on('click', ...).