php - AJAX 不在表单内工作并立即将我发送到 PHP 脚本？ PHP/ Ajax

Question

我的 Web 应用程序目前有一个功能，您可以通过单击 “添加技能” 按钮来添加您的技能，非常简单并且一直在努力，直到我尝试向其中添加其他内容混合。错误是这样的事实，当我点击“添加技能”按钮时，它就像提交按钮一样，并尝试执行 php 脚本 skills/add

我目前正在努力做到这一点，以便我的应用程序不断检查用户输入的文本是否存在于数据库中，如果不存在，则用绿色勾号或红色叉号表示。

我想问的是，有人能看出为什么这没有按预期工作吗？

查看

<form method="post" action="skills/add" id="container">  

<script>

$.fn.addSlide = function () {
return this.each(function () {
    var $this = $(this),
        $num = $('.slide').length++,
        $name = $('<input type="text" class="inputField" id="autoskill-' + $num + '" name="skill-' + $num + '" placeholder="What\'s your skill?"></div><img id="tick" src="/images/tick.png" width="16" height="16"/><img id="cross" src="/images/cross.png" width="16" height="16"/>');
        $slide = $('<br><div class="slide" id="slider-' + $num + '"></div><br>'),
        $amt = $('<input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/><br>');
    $this.append($name).append($amt).append($slide);
    console.log($('#autoskill'));
    $slide.slider({
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        slide: function (event, ui) {
            $amt.val(ui.value); 
        }
    });
});
}

$('body').on('click', '.addNew', function(event) {
event.preventDefault();
$('#newFields').addSlide();
}); 

var count = 0;  

$(document).ready(function(){   

$('.inputField').keyup(skill_check);

function skill_check(){
    var skill = $('.inputField').val();
    if(skill == "" || skill.length < 4){
    $('.inputField').css('border', '3px #CCC solid');
    $('#tick').hide();
}else{
    jQuery.ajax({
       type: "POST",
       url: "skills/auto",
       data: 'name='+ skill,
       cache: false,
       success: function(response){
            if(response == 1){
                $('.inputField').css('border', '3px #C33 solid');   
                $('#tick').hide();
                $('#cross').fadeIn();
            }else{
                $('.inputField').css('border', '3px #090 solid');
                $('#cross').hide();
                $('#tick').fadeIn();
             }
        }
    });

}

$('.addNew').click( function(event){
    event.preventDefault();
    $('#length').html(count);       
    count++;
});

$('.submitButton').click( function(event){
    $('#container').append('<input type="hidden" name="count" value="' + count + '">');
});

});

</script>

<button class="addNew submitButton"> Add a Skill </button><br>

<div id="newFields"></div>

<input type="submit" class="submitButton" value="Save Skills">

</form>

提前感谢您的帮助。

Answer 1

你应该使用你的 php 脚本的绝对路径..

jQuery.ajax({
   type: "POST",
   url: "full-path-to-your-script",