Question

我使用eModal通过ajax远程调用模态。虽然在模态中我有一个表单， javascript 代码不会听它，因此它不会发布。我的代码如下;

eModal和Ajax表单;

    $(document).ready(function() {

    // process the PROJECT UPDATE form  
    $('#proj-edit').submit(function(event) {

    // get the form data
    var formData = {
        'projID'            : $('input[name=projID]').val(),
        'projname'          : $('input[name=projname]').val(),
        'projstart'         : $('input[name=projstart]').val(),
        'projend'           : $('input[name=projend]').val(),
        'projhotel'         : $('input[name=projhotel]').val(),
        'projcity'          : $('input[name=projcity]').val(),
        'projstatus'        : $('#projstatus').val()
    };

    if (formData.projname == ''      || 
        formData.projstart == ''     || 
        formData.projend == ''       || 
        formData.projhotel == ''     || 
        formData.projcity == '') {

        return false;
    }

    // process the form
    $.ajax({
        type        : 'POST',
        url         : 'inc/prjedit.ajax.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        // using the done promise callback
        .done(function(data) {

            // log data to the console so we can see
            console.log(data); 

            // here we will handle errors and validation messages
            if ( ! data.success) {

            } else {

                $('#proj-edit').trigger('reset');
                swal("Success!", "Edit success!", "success");
            }
        })

        // using the fail promise callback
        .fail(function(data) {

            // show any errors
            console.log(data);
        });
    event.preventDefault();
});

$('button[id=demo]').click(function() {
        var value = $(this).val();
        ajaxDemo(value)
    });

    function ajaxDemo(value) {
        var title = 'Ajax modal';
        var params = {
            size: eModal.size.lg,
            title: title,
            type: 'GET',
            url: 'inc/demo.ajax.php?pID='+ value
        };

        eModal.setEModalOptions({ 
            loadingHtml: '<div class="text-center"><span class="fa fa-circle-o-notch fa-spin fa-5x text-primary"></span></div>',
        });

        return eModal
            .ajax(params);
    }

});

模态内容相当简单;

<form class="form" method="POST" action="" id="proj-edit" name="proj-edit">
// the input fields are here. Although since it is too long, I did not include them in here.
<button type="submit" class="btn btn-info" name="update-prj">Register</button>
</form>

我应该注意， JavaScript 代码位于名为magic.js的不同文档中，虽然模式不提交表单，但模式仍有效。我在这里错过了什么或我做错了什么？

控制台日志可以说明这一切;

(When eModal opens ->) XHR finished loading: GET "http://localhost/parantez/inc/demo.ajax.php?pID=301".k.cors.a.crossDomain.send @ jQuery-2.1.4.min.js:4n.extend.ajax @ jQuery-2.1.4.min.js:4n.fn.load @ jQuery-2.1.4.min.js:4ajax @ eModal.js:336ajaxDemo @ magic.js:270(anonymous function) @ magic.js:253n.event.dispatch @ jQuery-2.1.4.min.js:3r.handle @ jQuery-2.1.4.min.js:3
(When form is submitted ->) Navigated to http://localhost/

由于this帖子，此问题现已解决。非常感谢你花时间回答，我非常感谢你的意见。感谢所有人。

Answer 1

您正在将javascript对象传递给php，这在ajax请求中无效

使用JSON.stringify（）将json对象转换为字符串，并在php中使用json_decode函数生成json对象...

像这样

$.ajax({
    type        : 'POST',
    url         : 'inc/prjedit.ajax.php',
    data        : JSON.stringify(formData),
    dataType    : 'json',
    encode      : true
})

如果您不想发送json数据，请使用 formData用于发送与提交相同的ajax数据

data = new FormData();
data.append('projID', $('input[name=projID]').val());

为所有人做这个，然后简单地将数据传递给像这样的ajax函数

$.ajax({
    url: 'http://example.com/script.php',
    data: data,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
       alert(data);
    }
});

好的希望这会有所帮助...

eModal中的Ajax表单不提交

由于this帖子，此问题现已解决。非常感谢你花时间回答，我非常感谢你的意见。感谢所有人。

1 个答案: